[tip] 주요 hook들에 대한 이해

[writer0713]

• useState

  • useState를 통해 react가 추적하는 state와 해당 state를 변경할수 있는 함수를 리턴 받을수 있다.
  • state를 변경하려면 꼭 함께 받은 state 변경 함수를 통해 변경해야 한다.
  • state가 변경되면 해당 컴포넌트는 리렌더링 된다.

• useEffect

  • useEffect를 통해 원하는 동작이 실행될 시점을 컨트롤 할 수 있다.
  • useEffect를 통해 component가 unmount 되는 시점에 특정 동작을 실행할 수 있다.

• useRef

  • useRef를 통해 Dom을 조작할수 있다.
  • useState를 통해 만든 state(변수)가 바뀌면 해당 component가 리렌더링 되는데, 만약 리렌더링과 관련없는 지역 변수를 만들고 싶을 경우 useRef를 사용할 수 있다.

• useMemo

  • 특정 함수를 통해 나온 값을 메모제이션하여 재사용한다.
  • 특정 state나 props 등이 바뀔때에만 다시 함수를 통해 새로운 값을 만들어내도록 한다.
  • 쉽게 말해, 불필요하게 똑같은 함수가 재실행되지 않도록 한다. (= 전혀 다른 값이 나와야 하는 경우에만 함수 실행)

• useCallback

  • 컴포넌트가 리렌더링 되면 컴포넌트 내부에 선언된 함수들도 재생성 되게 된다.
  • 같은 일을 하는 함수가 매번 리렌더링 될때마다 재생성되는건 비효율적이다.
  • 리렌더링시 함수가 재생성 되면props 를 통해 해당 함수를 받아 사용하는 자식 컴포넌트들도 리렌더링 되게 된다.
  • 이런 경우, useCallback 훅을 통해 함수를 재생성하지 않게 하거나, 혹은 특정한 경우(시점)에만 재생성하도록 할 수 있다.
  • useMemo가 함수의 결과값 에 대해 메모제이션 한다면, useCallback은 함수 자체를 메모제이션 한다고 보면 된다.

[writer0713]

• 아래 자료들이 설명 잘함
  • useState : https://www.youtube.com/watch?v=hSdVDBPTT0U
  • useEffect : https://www.youtube.com/watch?v=KAMLhuWDrEI
  • useMemo & useCallback :
  • https://www.youtube.com/watch?v=uBmnf_k7_r0
  • https://www.daleseo.com/react-hooks-use-callback/

[writer0713]

규모가 작은 어플리케이션의 경우에는 useMemo, useCallback 사용이 성능에 큰 영향을 미치지 않는다.