코딩65 리액트 숙련 React Hooks - useContext(Context API) 일반적으로 부모컴포넌트 → 자식 컴포넌트로 데이터를 전달해 줄 때 props 를 사용했다. 그러나 부모 → 자식 → 그 자식 → 그자식의 자식 이렇게 너무 깊어지게 되면 prop drilling 현상이 일어난다. prop drilling의 문제점은 깊이가 너무 깊어지면 이 prop이 어떤 컴포넌트로부터 왔는지 파악이 어려워진다. 어떤 컴포넌트에서 오류가 발생할 경우 추적이 힘들어지니 대처가 늦을 수 밖에 없다. 출처 : https://www.copycat.dev/blog/react-context/ Your Guide To The React Context API - CopyCat Blog This article explains the drawbacks of managing data via props alo.. 2023. 4. 18. 리액트 숙련(React Hooks - useRef) # useRef란? 예를 들면 화면이 렌더링 되자마자 특정 input 태그가 focusing이 돼야 하는 경우 등에 사용된다. useRef hook은 다음과 같이 사용한다. import "./App.css"; import { useRef } from "react"; function App() { const ref = useRef("초기값"); console.log("ref", ref); return ( useRef에 대한 이야기에요. ); } export default App; (중요) 이렇게 설정된 ref 값은 컴포넌트가 계속해서 렌더링 되어도 unmount 전까지 값을 유지한다. 이러한 특징 때문에 useRef는 다음 2가지 용도로 사용된다. 저장공간 state와 비슷한 역할을 해요. 다만 state.. 2023. 4. 18. 리액트 숙련(React Hooks - useEffect) # useEffect useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶거나 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶을때 useEffect를 사용한다. // src/App.js import React, { useEffect } from "react"; const App = () => { useEffect(() => { // 이 부분이 실행된다. console.log("hello useEffect"); }); return Home; } export default App; App 컴포넌트가 화면에 렌더링될 때 useEffect 안에 있는 console.log가 실행된다. 컴.. 2023. 4. 18. 리액트 숙련(React Hooks - useState) # useState useState는 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 가지게 해준다. useState의 기본적인 형태는 아래와 같다. const [state, setState] = useState(initialState); useState라는 함수가 배열을 반환하고, 이것을 구조 분해 문법으로 꺼내놓은 모습이다. state를 변수로 사용하고, setState를 이용해서 state 값을 수정할 수 있다. 만약 state가 원시 데이터 타입이 아닌 객체 데이터 타입인 경우에는 불변성을 유지해야한다. # 함수형 업데이트 // 기존에 우리가 사용하던 방식 setState(number + 1); // 함수형 업데이트 setState(() => {}); 위 코드와 같이 setState.. 2023. 4. 18. 이전 1 ··· 5 6 7 8 9 10 11 ··· 17 다음
