훅(Hook)
📚 정리 - 리액트 훅의 목적은 "기억" - 상태는 이벤트 실행/ 시간이 지남에 따라 변경되는 데이터 - 함수 컴포넌트는 최초 렌더링 후 상태가 변경될 때마다 처음부터 다시 그린다. - 컴포넌트는 페이지가 전환되거나 toggle될 때 파괴된다.
1. Hook의 목적
리액트 훅은 "기억"하는 용도로 사용하는 것에 목적이 있다. 상태(state)를 기억하거나 사이드 이펙트를 수행해야 하는 경우 사용하는 특수한 함수이다.
2. 상태란?
"시간이 지남에 따라 변경되는 데이터"이다. 이는 시간의 의미도 있지만 사용자에 의해 이벤트가 실행 됐을 때, 상태가 업데이는 되는 경우를 말할 수 있다.
3. 컴포넌트 렌더링
함수 컴포넌트는 처음 화면에 렌더링이 되고나서 상태가 변경될 때 마다 계속해서 컴포넌트를 다시 렌더링 한다. 이는 컴포넌트의 내부 로직을 전부 다시 읽는다는 것이다. 일반적으로 함수는 다시 렌더링 될 때, 이전의 값을 기억할 수 없지만 state를 관리하는 훅(useState, useReducer, useRef)를 사용해서 이 전의 값을 기억 할 수 있다.
바닐라 자바스크립트에서 함수가 다시 렌더링 될 때, 이 전의 값을 기억하지 못하는 문제 때문에 클로저를 사용한다.
4. 컴포넌트 파괴
그렇다면 컴포넌트는 언제 파괴 될까?
페이지가 전환될 때
toggle 처럼 요소를 열고/닫을 때
단, 페이지 전환이 아닌 경우엔 useEffect의 clean up 함수를 사용해서 언마운트 시점에 사이드 이펙트를 해제하도록 설정해야 한다. (그렇지 않으면 컴포넌트 내부의 함수가 계속 실행되어 성능에 영향을 미친다.)
5. Hook 한 눈에 보기
용도
훅(Hook)
간단한 상태 관리를 한다.
컴포넌트의 이전 상태를 기억하고 변화가 있을 때마다 컴포넌트를 업데이트 하고 싶다.
useState
복잡한 상태 관리를 한다.
useReducer
context
를 사용할 때 Provider
의 value
를 받아 온다.
useContext
함수 컴포넌트 내부에 선언한 함수가 한 번만 실행 됐으면 좋겠다.
마운트 이후 시점 DOM에 접근하고 싶다.
useEffect
자식 컴포넌트에 함수를 전파할 때, 동시성 문제를 방지하기 위해 해당 함수를 기억한다.
컴포넌트가 업데이트 될 때 마다 불필요한 과정이 발생하지 않도록 한다.
useCallback
컴포넌트의 이전 상태를 기억하고 싶다. 하지만 업데이트는 필요 없다.
DOM 객체를 참조하여 조작하고 싶다.
useRef
useEffect
사용 시 문제가 있고 useEffect
보다 더 빨리 반응 했으면 좋겠다.
useLayoutEffect
복잡한 계산식을 기억하여 렌더링 될 때 마다 다시 계산하지 않았음 좋겠다.
useMemo
Last updated