[React] Hooks : useEffect( )

---

📝 useEffect

useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정하는 Hook입니다.
클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태로 보아도 무방합니다.

📜 useEffect 활용

import { useState, useEffect } from 'react';

const Info = () => {

      let [name, setName] = useState('');
      let [nickName, setNickName] = useState('');
      useEffect(() => {
        console.log('렌더링 완료');
          console.log({
            name,
              nickName
        });
    });

      const onChangeName = (e) => {
        setName(e.target.value);
    };
    const onChangeNickName = (e) => {
        setNickName(e.target.value);
    };

    return(
        <div>
              <div>
                  <input value={name} onChange={onChangeName} />
                  <input value={nickName} onChange={onChangeNickName} />
            </div>
            <div>
                <p>이름 : </p> {name}
                <p>닉네임 : </p> {nickName}
            </div>

          </div>
    )
};

export default Info;

결과물을 보면 console.log의 문구가 두 번 출력 됩니다.
이는 React.StricMode가 적용된 개발 환경에서만 발생하는 현상입니다.
useEffect를 사용한 코드에 문제가 있는지 없는지 감지하기 위해 두 번 실행이 된다고 합니다.

📜 마운트될 때만 실행하고 싶을 때

useEffect에서 설정한 함수를 컴포넌트가 화면에 맨 처음 렌더링될 때만 실행하고, 업데이트될 때는 실행하지 않으려면 함수의 두 번째 파라미터로 비어 있는 배열을 넣어 주면 됩니다.

      useEffect(() => {
        console.log('렌더링 완료');
    }, []);

📜 특정 값이 업데이트될 때만 실행하고 싶을 때

useEffect에서 특정 값이 변경될 때만 호출할 때는 두 번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어 주면 됩니다.

      useEffect(() => {
        console.log(name);
    }, [name]);

배열 안에는 useState를 통해 관리하고 있는 상태를 넣어 주어도 되고, props로 전달받은 값을 넣어 주어도 됩니다.
대부분의 useEffect를 사용할 때는 이렇게 배열에 의존하는 값을 넣어줍니다. 빈 배열이나 의존 값이 들어있는 배열을 넣는 경우는 있어도, 배열을 아예 생략하는 상황은 거의 없다고 생각하면 됩니다.

📜 뒷정리(cleanup) 하기

useEffect는 기본적으로 렌더링되고 난 직후마다 실행되며, 두 번째 파라미터 배열에 무엇을 넣는지에 따라 실행 조건이 달라집니다.

컴포넌트가 언마운트되기 전이나 업데이트가되기 직전에 어떠한 작업을 수행하고 싶다면 useEffect에서 뒷정리(cleanup)함수를 반환해 주어야 합니다.

      useEffect(() => {
          console.log('effect');
        console.log(name);
          return () => {
            console.log('cleanup');
              console.log(name);
        };
    }, [name]);