[React] Hooks

useState

• 컴포넌트 내에서 변경 가능한 값이 필요하며 그 값의 변화에 따라 리렌더링될 때 사용하는 훅

useEffect & useLayoutEffect

• 컴포넌트의 생애 주기 또는 데이터의 생애 주기에 따라 특정 코드를 실행시키고 싶을 때 사용하는 훅

차이점

• useEffect: 화면이 실제로 업데이트 된 이후에 비동기적으로 실행이 되는 특징이 있다.
• useLayoutEffect: 화면이 실제로 업데이트 되기 이전에 동기적으로 실행이 되는 특징이 있다.
  

useMemo & useCallback

컴포넌트의 생애 주기 또는 데이터의 생애 주기에 따라서

• useMemo: 특정 값을 업데이트하고 싶을 때 사용하는 훅
• useCallback: 함수를 새로 정의하고 싶을 때 사용하는 훅

[참고] 어떤 때에 useMemo와 useCallback을 사용하는가?

크게 두 가지 경우가 있다.

1. “정말로” 컴포넌트의 생애주기 또는 데이터 값의 변화에 따라 어떤 값을 업데이트하고 싶을 때
2. 리렌더링 될 때마다 새롭게 값을 계산하거나 새롭게 함수를 정의하는 것이 문제가 될 때
   1. 새로운 값의 계산이나 새로운 함수의 정의가 무거운 작업일 때
   2. 값의 참조값 또는 함수의 참조값을 유지하는 것이 중요할 때 = React.memo를 사용했음에도 불구하고 props가 객체라면 리렌더링될 때마다 참조값(주소)가 바뀌므로 다른 props로 인식되어 리렌더링 된다.

   React.memo
   '부모 컴포넌트가 리렌더링 되면 자식 컴포넌트도 리렌더링 된다'를 회피하기 위한 메모이제이션 장치

useRef

• 컴포넌트의 리렌더링에 영향을 받지 않는 참조를 유지하고 싶을 때 사용하는 훅