[React] useEffect() *

/* 정보 전달 목적의 글 보다는 공부하면서 기억하기 위해 적는 글입니다.
따라서 깊이가 얕으며, 잘못된 정보가 있을 수 있습니다. */

---

useEffect()란?

useEffect(effect, deps);

effect : useEffect가 동작할 함수

deps : deps 리스트에 있는 값일 때만 값이 변하도록 함.

 

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

componentDidMount + componentDidUpdate + componentWillUnmount와 비슷하다.

 

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

const MyComponent = () => {
  const [number, setNumber] = useState(0);
  const [aNumber, setAnumber] = useState(0);

  useEffect(() => {
    console.log("hello");
  });

  return (
    <div className="App">
      <button onClick={() => setNumber(number + 1)}>{number}</button>
      <button onClick={() => setAnumber(aNumber + 1)}>{aNumber}</button>
    </div>
  )
}

export default MyComponent;

위의 코드를 실행하면, 맨 처음에 마운트가 끝났을 때(componentDidMount) hello가 한 번 출력되고,

버튼을 눌러 값을 업데이트 할 때 마다(componentDidUpdate) hello가 출력된다.

 

기본적으로 렌더링되고 난 직후마다 실행되며, 두 번째 파라미터 배열에 무엇을 넣느냐에 따라 업데이트 유무에 따라 실행된다.

 

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

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

const MyComponent = () => {
  const [number, setNumber] = useState(0);
  const [aNumber, setAnumber] = useState(0);

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

  return (
    <div className="App">
      <button onClick={() => setNumber(number + 1)}>{number}</button>
      <button onClick={() => setAnumber(aNumber + 1)}>{aNumber}</button>
    </div>
  )
}

export default MyComponent;

 

처음 렌더링 될 때 만 실행되고, 업데이트 될 때는 실행하지 않으려면

useEffect의 두 번째 파라미터로 비어있는 배열을 넣어주면 된다.

 

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

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

const MyComponent = () => {
  const [number, setNumber] = useState(0);
  const [aNumber, setAnumber] = useState(0);

  useEffect(() => {
    console.log("hello");
  }, [number]);

  return (
    <div className="App">
      <button onClick={() => setNumber(number + 1)}>{number}</button>
      <button onClick={() => setAnumber(aNumber + 1)}>{aNumber}</button>
    </div>
  )
}

export default MyComponent;

맨 처음 렌더링이 될 때와 특정 값이 업데이트될 때만 실행하고 싶다면

useEffect의 두 번째 파라미터로 원하는 state을 넣어주면 된다.

 

처음 렌더링 될 때 실행되는건 useEffect의 기본적인 속성이기 때문이다.

 

뒷정리하기

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

const MyComponent = () => {
  const [number, setNumber] = useState(0);
  const [aNumber, setAnumber] = useState(0);

  useEffect(() => {
    console.log("hello");
    console.log(number);
    return () => {
      console.log("bye");
      console.log(number);
    };
  });

  return (
    <div className="App">
      <button onClick={() => setNumber(number + 1)}>{number}</button>
      <button onClick={() => setAnumber(aNumber + 1)}>{aNumber}</button>
    </div>
  )
}

export default MyComponent;

컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 어떠한 작업을 수행하고 싶다면

useEffect에서 뒷정리(cleanup) 함수를 반환하면 된다.

 

현재 값이 1일 때, 버튼을 클릭하면 업데이트 되기 직전에 bye와 number(1)를 출력하고, 곧이어 업데이트 값인 hello와 number(2)를 출력한다.

 

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

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

const MyComponent = () => {
  const [number, setNumber] = useState(0);
  const [aNumber, setAnumber] = useState(0);

  useEffect(() => {
    console.log("hello");
    console.log(number);
    return () => {
      console.log("bye");
      console.log(number);
    };
  }, []);

  return (
    <div className="App">
      <button onClick={() => setNumber(number + 1)}>{number}</button>
      <button onClick={() => setAnumber(aNumber + 1)}>{aNumber}</button>
    </div>
  )
}

export default MyComponent;

 

 

결론

useEffect는 componentDidMount + componentDidUpdate + componentWillUnmount와 비슷하다.

만약 업데이트 유무에 따라 조절하고 싶을 때는 두 번째 파라미터를 건들면 된다.

 

 

---