[React] React Hooks: useEffect()란?

useEffect()란?

useEffect는 React에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 말합니다.
이전에 정리한 클래스 컴포넌트에서의 리액트 라이프사이클을 함수 컴포넌트에서 대체할 수 있는 것이 바로
이 리액트 훅인 useEffect입니다.

클래스 컴포넌트에서 라이프사이클
1. 마운트 되고 나서 componentsDidMount
2. 업데이트 되었을 때 componentDidUpdate
3. 언마운트 될 때 componentWillUnmount

※ Tip
useEffect Hook을 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것으로 생각해도 좋습니다.

기본형태

useEffect(function, deps)

• function
  수행하고자 하는 작업
• deps
  [], 배열 형태, 검사하고자 하는 특정값을 배열에 추가 또는 빈 배열.

컴포넌트가 마운트 될 때

useEffect(() => {
  console.log("렌더링 될 때마다 실행!");
});

deps자리에 배열을 작성하지 않으면 컴포넌트가 렌더링이 될 때마다 실행이 됩니다.

useEffect(() => {
  console.log("맨 처음 렌더링되고 나서 실행");
}, []);

빈 배열을 작성을 하면 componentDidMount와 같이 컴포넌트가 처음 마운트, 렌더링이 되고 나서 한번 실행을 합니다.

컴포넌트가 업데이트 되었을 때

useEffect(() => {
    console.log("user 값 설정";
    console.log("user 값이 업데이트가 될 때 실행")
  }, [user]);

특정 값(props, state 등등)이 업데이트 될 때마다 함수를 실행하고 싶을 때는 deps 배열에 값을 넣으면 됩니다.
그렇게 되면 그 값이 변할 때 해당 함수가 다시 실행이 되기 때문입니다.

만약 처음 마운트 되었을 때는 실행을 안하고, 값이 바뀌면 그 때부터 실행을 하고 싶을 때는 이렇게도 사용이 가능합니다.

const mounted = useRef(false);
useEffect(() => {
  if (!mounted.current) {
    mounted.current = true;
  } else {
    console.log("user 값 설정";
    console.log("user 값이 업데이트가 될 때 실행")
  }
}, [user]);

마운트가 되었을 때는 if문 안의 mounted의 값만 true로 바꿔주기 때문에 원하는 작업을 실행시키지 않을 수 있습니다.

컴포넌트가 언마운트 될 때

  useEffect(() => {
    console.log("hello");
    return () => {
      console.log("cleanUp 함수");
    };
  });

클래스 컴포넌트에서는 흔히 componentWillUnmount에서 해당 이벤트를 정리(clean-up)합니다.
이러한 역할을 useEffect에서는 return부분에 함수를 반환하여 해당 이벤트를 clean-up 해줍니다.
언마운트 될 때만 clean-up 함수를 실행시키고 싶다면 deps에 빈 배열을,
특정 값이 업데이트되기 직전에 clean-up 함수를 실행시키고 싶다면 deps에 해당 값을 넣어주면 됩니다.

참고

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
React Hooks! useEffect편(React 17버전)
[React] 리액트 Hooks : useEffect() 함수 사용법