[ React-Hooks ] useEffect 사용하기

useEffect 선언 방법

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

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

Effect.js

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

const Effect = () => {
  const [name, setName] = useState('');
  const [nickname, setNickname] = useState('');
  
  useEffect(() => {
    console.log('마운트될 때만 실행 됩니다');
  },[]);
  
  const onChangeName = e => {
    setName(e.target.value);
  };

  const onChangeNickname = e => {
    setNickname(e.target.value);
  }

  return (
    <div>
      <div>
        <input type="text" value={name} onChange={onChangeName}/>
        <input type="text" value={nickname} onChange={onChangeNickname}/>
      </div>
      <div>
        <div>
          <b>이름 : </b> {name}
        </div>
        <div>
          <b>닉네임 : </b> {nickname}
        </div>
      </div>
    </div>
  );
}

export default Effect

실행화면

컴포넌트가 처음 나타날 때만 콘솔 문구가 나타나고 그 이후에는 나타나지 않습니다

---

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

useEffect의 두 번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어주면 됩니다

Effect2.js

// 위 코드에서 useEffect를 밑에 코드로 변경

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

실행화면

 

---

3. 뒷정리하기

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

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

App.js

import React,{useState} from "react";
import Effect3 from "./hooks/Effect3";

function App() {
  const [visible, setVisible] = useState(false);
  return (
    <div>
      <button onClick={() => {setVisible(!visible)}}>
        {visible ? '숨기기' : '보이기'}
      </button>
      <hr/>
      {visible && <Effect3 />}
    </div>
  );
}

export default App;

Effect3.js

// Effect.js 코드중 useEffect만 변경해주세요

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

실행화면

 

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

렌더링이 될 때마다 뒷정리 함수가 계속 나타나는 것을 확인할 수 있습니다 그리고 뒷정리 함수가 호출될 때는 업데이트되기 직전의 값을 보여줍니다

오직 원마운트 될 때만 뒷정리 함수를 호출하고 싶다면 useEffect 함수의 두 번째 파라미터에 비어있는 배열을 넣으면 됩니다