useEffect

리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있는 Hook

import React, { useState, useEffect } from 'react';

const Info = () => {
  const [name, setName] = useState('');
  const [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 (
    (...)
  );
};

export default Info;

컴포넌트가 리렌더링 될때마다 log가 찍힘

마운트 될 때만 실행

useEffect 함수의 두번째 파라미터로 비어있는 배열을 넣어 최초 렌더링 시점에만 실행

useEffect(() => {
	console.log('마운트 될 때만 실행됩니다.');
}, []);

특정 값이 업데이트 될 때만 실행

useEffect 함수의 두번째 파라미터 배열 안에 값을 지정해주면 해당 값이 업데이트 되었을 때, useEffect 함수를 다시 호출

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

뒷정리

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

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