리액트 훅 복습

useMemo

상태, 속성 값을 이용해 값을 계산할 때, 상태, 속성 값이 바뀌지 않았다면
재렌더링 시에도 기존 값을 쓰게 하는 것

기존 값을 쓰는 경우

• 부모 컴포넌트가 재렌더링 했을 시
• 계산에 쓰이지 않은 다른 상태, 속성 값이 바뀌었을 시

useCallback

함수 선언이 재렌더링 될 때마다가 아니고, 필요한 경우에만 재선언되도록 하는 것.
상태, 속성 값을 사용한 함수라면 의존성 배열에 넣어준다.

react.Memo

상태, 속성 값이 그대로이지만 부모가 재렌더링 될 때 자식도 같이 재렌더링되는 것을 막는다.
속성값은 값, 함수가 될 수 있는데 값의 경우에는 props로 들어온 값이 바뀌지 않으면되지만,
함수는 부모 단에서 useCallback을 해주지 않으면 전해질 때 매번 생성되어 달라지므로 주의해야한다.

useEffect

컴포넌트 안에서 사용된 상태 값, 속성 값 또는 이 두가지 값으로 계산된 어떤 값이 있을 때, 그것을 부수효과 함수 안에서 사용했다면, 항상 그 값은 의존성 배열에 나열해줘야 한다.

• 4함수 다 로직에 상태, 속성 값이 쓰였다면 의존성 배열에 넣어줘야한다.
• 의존성 배열의 값에 따라 useMemo, useCallback은 조건부 선언 / useEffect는 조건부 실행이라고 볼 수 있을 것 같다.

함수형 setState

• 이전 상태 값을 기반으로 setState를 한다면 의존성 배열에 state를 넣지 않고
  함수형 setState로 대체할 수 있다.
• 기존 상태를 참조하는 함수는 상태가 바뀔 때마다 새로 생성된다.

useCallback에서 기존 상태 값을 이용할 시

• 여러 이벤트 핸들러 함수에서 같은 상태를 사용하고 useCallback를 사용해 상태를 의존하는 경우 한 함수에서 상태가 변경됐을 때 컴포넌트가 리렌더링되어 그 상태를 의존하는 다른 함수들도 다시 생성될 수 있다(영향받음)
• 이 경우 함수형 setState를 해준다면 함수 의존성 배열에 상태를 넣지 않아도 실행 시마다 최신 상태를 보장받을 수 있다.