React hook 9가지 정리하기

Index

1. useEffect

2. useRef

3. useLayoutEffect

4. useReducer

5. useContext

6. useMemo

7. useCallback

8. useTransition

9. useDeferredValue

---

 

 

1. useEffect

- 컴포넌트가 랜더링 될 때마다 특정 작업을 실행할 때 사용

- 컴포넌트가 mount, update, unmount 됬을 때 실행됨

- mount 될 때 : deps 위치에 빈 배열을 전달(deps 위치에 값을 생략하면 리랜더링 될 때 마다 실행된다.)

- update 될 때 : deps 위치의 배열에 검사하고 싶은 값을 전달. 마운트될 때도 실행된다.

  *update될 때만 실행되야 한다면, useRef를 이용하여 flag 값을 두고 flag.current 값을 사용하여 useEffect 내부 조건문 처리

- unmount될 때 : return 값으로 cleanup 함수를 반환한다. unmount될 때만 cleanup 함수를 실행하고자 한다면 deps 위치에 빈배열 전달

  * 특정 값 update 직전에 cleanup함수를 실행하고자 한다면, deps 위치에 검사하고자 하는 값의 배열을 전달

 

useEffect warning 참고: https://yunzema.tistory.com/519

2. useRef

- 기본적으로 DOM 참조를 하기 위해 사용한다.

- 컴포넌트가 재랜더링이 되더라도 상태를 저장하되, 상태의 변경이 리랜더링을 발생시키지 않도록 할 때 사용

 

3. useLayoutEffect

- 랜더링 시 DOM에 반영되기 직전에 DOM 접근/레이아웃 작업을 할 때 사용

- 랜더링 성능에 영향을 줄 수 있으므로 주의

 

4. useReducer

- useState와 비슷한 역할로 state를 변경하는 역할을 수행한다.

- 연관된 state를 함께 묶어 처리하기에 용이하다.

- state 변경에 대한 부분을 component 외부에 reducer 함수를 정의하여 사용할 수 있음.

- 복잡한 state들을 다루는 경우 정리된 코드를 작성 할 수 있다.

 

5. useContext

- props drilling을 지양하기 위해 Context API를 사용할 때 사용하는 Hook

- 부모 컴포넌트의 Provider value를 return 값으로 가지고 올 수 있다.

 

6. useMemo

- 기본적으로 연산된 결과 값을 사용할 때 사용

- 리랜더링될 때마다 변동되지 않는 연산 결과 값을 중복으로 실행되지 않도록 memoization 하여 성능을 개선할 때 사용

 

7. useCallback

- 리랜더링될 때마다 메모리에 함수를 재생성 하는 것을 방지하고 재사용하여 개선할 때 사용

- React.memo와 함께 사용하여 컴포넌트 리랜더링을 방지하는 역할로 사용

 

8. useTransition

- UI를 차단하지 않고 상태를 업데이트 할 수 있도록할 때 사용

- 모두 빠르게 반응하면 최고지만, 모든 상태가 렌더링이 동기적으로 일어나면 성능이 좋지 않은 상황에서는 모든 상태가 늦게 반응하게 되므로, 우선순위를 정해줄 때 활용한다.

- 낮은 우선순위로 처리해야 하는 경우 상태 업데이트를 startTransition으로 래핑하여 사용하면, 낮은 우선순위로 실행된다.

  - startTransition은 동기 함수여야 하며, 다른 setState가 있을 경우 중단하고 우선순위가 밀린다.

  - 텍스트 입력 제어에는 사용할 수 없다.

- isPending 값은 낮은 우선순위로 처리되는 상태 업데이트가 지연되고 있는지 여부 값을 지니고 있다 .

 

9. useDefferedValue

- useTransition과 동일하게 상태 업데이트의 우선순위를 낮추는 역할을 한다. state의 변화에 대한 우선순위를 낮추는 hook이라는 공통점을 가지며 useDeferredValue는 state 값 자체에 우선순위를 낮춘다.

- 선언된 deferredValue의 값의 변화가 다른 state의 변화가 끝난 뒤에 발생한다.

- 마치 debounce가 적용된 것 같은 효과(?)