[React] useEffect

1. 정의

리액트에서 어떠한 컴포넌트를 불러오거나(마운트), 사라지게 하고(언마운트) 또한 업데이트 사항이 발생할 경우 이에 대한 생명 주기(Life Cycle)를 관리하는 훅(Hook)이다.

 

 

 

2. 사용

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

function Sample({ }) {
  const [number, setNumber] = useState(0);
  
  /**
  * function: 수행하고자 하는 작업(상태 변수 및 함수)
  * deps: 검사하고자 하는 특정 값(배열)
  */
  useEffect(() => {
    console.log(number); // 컴포넌트를 나타나게 하는 구현부 
    return () => { // cleanup 함수
      console.log('UNMOUNT!'); // 컴포넌트를 사라지게 하는 구현부
    };
  }, []); // 해당 Hook을 한 번만 실행되게 하고 싶을 경우 빈 배열의 형태로 놓는다.
  
  const onClick = () => {
    setNumber += 1;
  }
  
  return (
    <div>
          <button onClick={ number }>버튼</button>
      </div>
  );
}

만약 deps(배열) 구문을 생략할 경우 다시 랜더링을 할 때마다 실행된다.

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

function Sample({ }) {
  const [number, setNumber] = useState(0);

  useEffect(() => {
    console.log(number);
    return () => {
      console.log('UNMOUNT!');
    };
  },); // deps 생략
  
  const onClick = () => {
    setNumber += 1;
  }
  
  return (
    <div>
          <button onClick={ number }>버튼</button>
      </div>
  );
}

또한, 상태 값이 바뀌는 변수가 있을때마다 useEffect를 발생시키고 싶다면 이를 deps 위치(배열)에 추가할 수 있다.

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

function Sample({ }) {
  const [number, setNumber] = useState(0);

  useEffect(() => {
    console.log(number);
    return () => {
      console.log('UNMOUNT!');
    };
  }, [number]); // number는 deps에 추가함으로써 의존성을 가지게 된다.
  
  const onClick = () => {
    setNumber += 1;
  }
  
  return (
    <div>
          <button onClick={ number }>버튼</button>
      </div>
  );
}