useEffect

useEffect를 활용하여 컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때 (사라질 때), 그리고 업데이트 될 때 (특정 props가 바뀔 때) 특정 작업을 처리할 수 있습니다.

• 클래스 컴포넌트의 life cycle 함수를 함수 컴포넌트에도 동일하게 사용 가능합니다.
• 최초 컴포넌트 마운트 되는 경우, 컴포넌트 내 레이아웃 배치와 랜더링이 완료된 후에 실행됩니다.
• 두 번째 인자(배열)의 요소로 지정하면, 해당 요소 값의 업데이트 되는 경우에만 실행됩니다.
• state나 props를 dependency로 지정하면, 불필요한 랜더링 발생 가능할 수 있으니 주의해야 합니다.

외부 데이터에 구독(subscription)을 설정해야 하는 경우를 생각해보겠습니다. 이런 경우에 메모리 누수가 발생하지 않도록 정리(clean-up)하는 것은 매우 중요합니다.

관심사를 구분하려고 한다면 Multiple Effect를 사용합니다

Hook이 탄생한 동기가 된 문제 중의 하나가 생명주기 class 메서드가 관련이 없는 로직들은 모아놓고, 관련이 있는 로직들은 여러 개의 메서드에 나누어 놓는 문제를 해결하기 위함입니다.

Mount or Update

useEffect(() => console.log('will update any'));

Unmount or Update

useEffect(() => () => console.log('will update any or unmount'));

Update Count

useEffect(() => console.log('will update count'), [count]);

#### Update Count or Unmount

useEffect(() => () => console.log('will update count or unmount'), [count]);

useMemo

• 메모이제이션 된 값을 반환합니다
• 의존성이 변경되는 경우, 이전에 기억하고 있던 리턴 값과 비교해서 다른 경우에만 리랜더 합니다.
• useMemo에서 전달된 함수는 랜더링 중에 실행되므로, 랜더링 중에서 실행하지 않는 함수는 useEffect를 사용할 것 합니다.
• useRef와의 차이는, useRef는 DOM element의 특정 속성 값을 기억한다면, useMemo는 특정 함수의 리턴 값을

useCallback

• 메모이제이션 된 콜백(함수) 자체를 반환합니다.
• useCallback(fn, deps)은 useMemo(() => fn, deps)과 동일합니다.
• 의존성이 변경되는 경우, 이전에 기억하고 있던 함수 자체와 비교해서 다른 경우에만 리랜더 합니다.

참고자료

리액트: Using the Effect Hook > 벨로퍼트와 함께하는 모던 리액트