[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]);