리액트 함수 컴포넌트생명주기(React Life cycle) feat.`usePrevious`

작년에 문제가 있어서 리액트 함수 컴포넌트 생명주기에 대해 찾아보고 공부했었는데,

그 문제를 해결하고 나서는 잊어버린채 살고있었다.

 

그러다가 최근 usePrevious라는 hook을 사용하면서

다시한번 함수형 컴포넌트의 라이프사이클을 공부해보았다.

 

usePrevious는 useInput처럼 흔하게 사용되는 리액트 훅 중 하나이다.

현재 값 말고 직전의 값을 가져올때 사용한다.

const usePrevious = (value: string) => {
  const ref = useRef<string>();
  const previousValue = ref.current;

  useEffect(() => {
    ref.current = value;
  }, [value]);

  return previousValue;
};

이 함수가 작동하는 원리는

리액트 함수 컴포넌트의 라이클 사이클을 이해해야 알 수 있다.

 

먼저 컴포넌트가 만들어져서 DOM에 삽입되는것을 마운트라고 하는데,

DOM을 만드는 함수가 호출되는 것을 렌더링이라고 한다.

(리액트 사이클에 대한 자세한 내용은 이 글을 참조시길)

 

마운트는 렌더링되고 componentDidMount 되는 것 까지를 한 사이클로 취급하는데,

useEffect는 클래스 컴포넌트의 componentDidMount, componentDidMount, componentWillUnmount와 같은 역할을 한다.

 

즉, useEffect는 처음 렌더링될때는 호출되지 않는다.

렌더링이 끝난 후 useEffect가 호출된다.

(componentDidMount와 같은 역할)

 

 

그러니까 usePrevious에서 실행되는 순서는

 

1. 함수 안에 있는 useEffect 이외의 내용들이 실행됨

=> previousValue가 리턴

 

2. useEffect 실행

=> ref.current에 현재의 value 저장

ref는 state와 달리 리렌더링을 일으키지 않으므로 화면은 그 상태로 유지됨.

 

 

이 원리에 따라 usePrevious는

항상 이전의 value를 리턴하고,

동시에 현재 value는 저장하고 있다고 볼 수 있다.

 

만약 usePrevious를 호출하는 외부 컴포넌트에서 previous훅을 호출한 뒤에 리렌더링이 생기는 경우,

usePrevious는 저장하고 있는 value를 리턴하므로

의도하지 않은 값을 리턴할 수 있다.

 

 

 

 

useEffect와 더불어 useLayout이라는 훅도 있는데,

useLayout은 useEffect가 실행되기 이전에 실행되는 훅이다.

만약 useEffect보다 먼저 실행되길 원한다면, 이 훅을 사용해 볼 수 있다.

하지만 useLayout도 초기 렌더링이 실행된 직후에 호출된다.