[React] React useEffect/componentDidMount/componentDidUpdate/componentWillUnmount

useEffect 역할

1. componentDidMount : 컴포넌트가 mount 된 직후의 작업을 해준다.
2. componentDidUpdate : 컴포넌트에서 Update가 일어난 후에 작업을 해준다.
3. componentWillUnmount : 컴포넌트가 unmount되기 직전의 작업을 해준다.

• Mount나 Update는 리액트의 생명주기에 관한 내용이다.

useEffect 사용법

• 기본 형태 : useEffect(effect function,  dependency array)
  • effect function : 컴포넌트가 mount 됐을 때, update 됐을 때 실행할 함수를 정한다.
  • dependency array : 이 배열의 값이 변할 때만 update 된 것으로 전달한다. 

import "./styles.css";
import { useState, useEffect } from "react";
const Hello = () => {
  const [count, setCount] = useState(0);		//Update를 구현하기 위해 state사용
  const Counting = () => {				
    setCount((current) => current + 1);			//Hello컴포넌트 클릭 시 count+1					
    console.log(count);
  };
  useEffect(() => {
    console.log("Hi!");							//effect function
  }, [count]);									//deps
  return <div onClick={Counting}>Hello</div>;
};

export default function App() {
  const [show, setShow] = useState(false);
  const handleClick = () => {
    setShow((current) => !current);
  };
  return (
    <div>
      <button onClick={handleClick}>
        {show ? <div>Hide</div> : <div>Show</div>} //버튼 클릭 시 show값 변화로 Hello 컴포넌트 마운트
      </button>				//다시 버튼 클릭 시 Hello 컴포넌트 언마운트
      {show ? <Hello /> : null}
    </div>
  );
}

• 위의 앱으로 useEffect의 componentDidMount 기능과 componentDidUpdate 기능을 구현했다.

comoponentDidMount

console.log("Hi!");

• 위 코드는 useEffect의 effect function 부분이다.
• 버튼을 눌러 show 값이 true가 되고, Hello 컴포넌트가 마운트되면

• effect function이 실행된 것을 볼 수 있다.

componentDidUpdate

  useEffect(() => {
    console.log("Hi!");						
  }, [count]);

• useEffect의 deps 배열에 count 값이 들어갔다.
• 이는 count 값이 update 될 때만 componentDidUpdate 기능을 한다는 것을 뜻한다.

• 실제로 count 값이 update 될 때 effect function이 실행된 것을 볼 수 있다.

Deps 배열을 빈 배열로 바꾸면 어떻게 될까?

  useEffect(() => {
    console.log("Hi!");						
  }, []);

• deps 배열을 빈 배열로 바꾸면 count 값이 바뀌어도 effect function이 실행되지 않는 것을 확인할 수 있다.
• 즉, deps 배열을 비움으로써 useEffect가 componentDidmount 기능만 수행하도록 할 수 있다.

componentWillUnmount

• componentWillUnmount 기능을 구현하려면, cleanup 함수를 추가해야 한다.

  useEffect(() => {
    console.log("Hi!");
    return () => {
      console.log("Bye..");
    };
  }, [count]);

• effect function에 다음과 같이 cleanup 함수를 추가하면, Hello 컴포넌트가 unmount 될 때 cleanup 함수를 실행한다.

• 버튼을 눌러 Hello 컴포넌트를 unmount 시키면 다음과 같이 cleanup 함수가 실행되는 것을 볼 수 있다.