[React] Hook - useEffect( )

useEffect()란?

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

useEffect()사용법

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

const App = () => {
  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 App;

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

만약 useEffect에서 설정한 함수로 컴포넌트가 화면에 가장 처음 렌더링 될 때만 실행되고 업데이트 할 경우에는 실행 할 필요가 없는 경우엔 함수의 두번째 파라미터로 비어있는 배열을 넣어주면 된다.

App.js - useEffect

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

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

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

App.js - useEffect

useEffect(() => {
  console.log('이름이 변경되었습니다.');
}, [name]);

※ 배열 내부에는 useState를 통해 관리하고 있는 상태를 넣어줘도 되고, props로 전달받은 값을 넣어줘도 된다.

마무리

• useEffect는 기본적으로 렌더링 되고난 직후마다 실행되며, 두번째 파라미터 배열에 무엇을 넣느냐에 따라 실행되는 조건이 달라진다.
• 만약 컴포넌트가 언마운트되기 전이나, 업데이트 되기 직전에 어떠한 작업을 수행하고 싶다면 useEffect에서 cleanup함수를 반환해 주어야 한다.

cleanup 사용하기

useEffect(() => {
  console.log('변경완료');
  return () => {
    console.log('CleanUp');
  }
}