useEffect

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

// Info.js

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 (
    <div>
      <div>
        <input value={name} onChange={onChangeName} />
        <input value={nickname} onChange={onChangeNickname} />
      </div>
      <div>
        <div>
          <b>이름:</b> {name}
        </div>
        <div>
          <b>닉네임:</b> {nickname}
        </div>
      </div>
    </div>
  );
};



export default Info;

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

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

기존 useEffect 코드를 다음과 같이 변경해 보자.

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

이번에는 컴포넌트가 처음 나타날 때만 콘솔에 문구가 나타난다.

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

useEffect를 사용할 때, 특정 값이 변경될 때만 호출하고 싶을 때도 있다.
클래스형 컴포넌트의 경우는

componentDidUpdate(prevProps, prevState) {
if (prevProps.value != = this.props.value) {
  doSomething();
}
}

이렇게 작성한다.

useEffect에서는, 두 번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어 주면 된다.
배열 안에는 useState를 통해 관리하고 있는 상태를 넣어 주어도 되고,
props로 전달받은 값을 넣어 주어도 된다.

다음과 같이 수정해보자.

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

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

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

다음과 같이 수정해보자.

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

App.js를 통해 Info 컴포넌트의 가시성을 바꿔보자.

import React, { useState } from 'react';
import Info from './Info';
 
const App = () => {
const [visible, setVisible] = useState(false);
return (
  <div>
      <button
      onClick={() => {
        setVisible(!visible);
        }}
      >
        {visible ? '숨기기' : '보이기'}
      </button>
      <hr />
    {visible && <Info />}
    </div>
);
};
 
export default App;

컴포넌트가 나타날 때 콘솔에 effect가 나타나고, 사라질 때 cleanup이 나타난다.

이름을 인풋창에 적어보면 렌더링 될 때마다 cleanup함수가 계속 나타나는 것을 확인할 수 있다.

언마운트 될 때만 cleanup 함수를 호출하고 싶다면 useEffect 함수의 두 번째 파라미터에 비어 있는 배열을 넣으면 된다.

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