3주차
3. 훅(Hook)
함수형 컴포넌트가 상태를 사용하거나 클래스형 컴포넌트의 생명주기 메서드를 대체하는 등의 다양한 작업 을 하기 위해 나옴
useState
- const [state, setState] = useState(initialState)
- 게으른초기화 :useState에 변수 대 신 함수를 넘기는 것 , 오로지 state가 처음 만들어질 때만 사용된다 , 무거운 연산이 요구될 때 사용
useEffect
- 두 번째 의존성 배열에 빈 배열을 넣으면 킴포넌 트가 마운트될 때만 실행된다.
- 애플리케이션 내 컴포넌트의 여러 값들을 활용해 동기적으로 부수 효과를 만드는 메커니즘
- 의존성배열 : 빈배열
- 클린업 함수 :이전 state를 참조해 실행
- 사용법
- eslint--disable-line react-hooks/exhaustive--deps 주석은 최대한 자제하기
- useEffect의 첫 번째 인수에 함수명을 부여하기
- 거대한 useEffect를 만들지 말기
- 불필요한 외부 할수를 만들지 말기
useMemo
- 비용이 큰 연산에 대한 결과를 저장(메모이제이션)해 두고 이 저장된 값을 반환하는 훅
useCallback
- 인수로 넘겨받은 콜백 자체를 기억함
- 함수의 메모이제이션을 위해 사용하는 것
useRef
- useState와 동일하게 컴포넌트 내부에서 렌더링이 일어나도 변경 가능한 상태값을 저장
- useRef는 반환값인 객체 내부에 있는 current로 값에 접근 또는 변경할 수 있다
- useRef는 그 값이 변하더라도 렌더링을 발생시키지 않는다
- DOM에 접근하고 싶을 때 사용
- 그냥 함수 외부에서 값을 선언해서 관리하는 것도 동일 ?
- 메모리에 불필요한 값을 갖게 하는 악영향
useContext
- prop 내려주기를 극복하기 위해 등장한 개념이 바로 콘텍스트(Context)
- const value = useContext(Context)
- 상태를 주입해 주는 API ( 상태관리 API 아님)
상태 관리 라이브러리가 되기 위해서 는최소한다음두가지 조건
-
어떠한 상태를 기반으로 다른 상태를 만들어 낼 수 있어야함
-
필요에 따라 이러한 상태 변화}를 최적화할 수 있어야함
useReducer
- useState와 비슷하지만 3개의 인수를 필요로 한다.
uselmperativeHandle
- 부모에게서 넘겨받은 ref를 원하는 대로 수정할 수 있는 훅
useLayoutEffect
- 이 함수의 시그니처는 useEffect와 동일하나(두 혹의 형태나 사용 예제가 동일) 모든 DOM의 변경 후에 동기적으로 발생한다
- DOM은 계산됐지만 이것 이 화면에 반영되기 전에 하고싶은작업이 있을때만 사용
useDebugValue
- 디버깅하고 싶은 정보를 이 훅에다 사용하면 리액트 개발자 도구에서 볼 수 있다
- useDebugValue(date, (date) => ‘현재시간 : 함수()’)
3.2 사용자 정의 훅 과 고차 컴포넌트중 무엇을 써야할까?
사용자 정의 혹이 필요한 경우
→ 컴포넌트 전반에 걸쳐 동일한 로직으로 값 을 제공하거나 특정한 혹의 작동을 취하게 하고 싶다면
고차 컴포넌트를 사용해야 하는 경우
→ 렌더령의 결과물에도 영향을 미치는 공통 로직일 때