React Hook - useEffect

useEffect

Hook의 useEffect는 클래스형 컴포넌트의 componentDidMount 나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것입니다.

useEffect는 기본적으로 매 렌더링 이후에 실행됩니다. 기본 예시는 다음과 같습니다.

 

useEffect 예시

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

const HookUseEffect = (props) => {
  const [description, setDescription] = useState('');
  useEffect(() => {
    // do effects
    setDescription('This is useEffect example.');
    return () => {
      // do cleanup
    }
  });

  return (
    <div>
      <span>{description}</span>
    </div>
  );
};

export default HookUseEffect;

effects 함수에서 특정 기능을 실행하고, 이를 해제해야 될 필요가 있다면 cleanup 함수에서 해제를 해주면 됩니다.

예를 들어, effects 함수에서 어떤 API를 구독한다면, cleanup 함수에서 구독해제를 하는 것입니다.

useEffect는 앞에서 언급한 바와 같이 기본적으로 매 렌더링 이후에 실행됩니다.

매 렌더링 이후에 effect가 실행되는 것이 아닌, 컴포넌트가 마운트된 직후 1회, 혹은 특정 값이 업데이트됐을 때만 실행하고 싶다면 아래와 같이 디펜던시를 등록하면 됩니다.

 

useEffect 디펜던시 예시

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

const HookUseEffect = (props) => {
  const [description, setDescription] = useState('');
  const [count, setCount] = useState(0);

  useEffect(() => {
    // do effects component did mount
    setDescription('This is useEffect example.');
    return () => {
      // cleanup component will unmount
    }
  }, []);

  useEffect(() => {
    // count 값 변경 시
    if (count > 0) {
      setDescription(`click count: ${count}`);
    }
    return () => {
      // cleanup
    }
  }, [count]);

  const handleButtonClick = () => {
    setCount(prevState => prevState + 1);
  };

  return (
    <div>
      <span>{description}</span>
      <button type="button" onClick={handleButtonClick}>버튼</button>
    </div>
  );
};

export default HookUseEffect;

useEffect API의 두 번째 인자로 배열을 전달하여 특정 변수의 값이 바뀌었 때만 effect를 실행하도록할 수 있고, 빈 배열을 전달하여 라이프사이클 메소드의 componentDidMount, componentWillUnmount와 비슷한 효과(엄밀하게는 약간 다르게 동작합니다.)를 낼 수 있습니다.

 

References

• https://ko.reactjs.org/docs/hooks-overview.html
• https://ko.reactjs.org/docs/hooks-effect.html
• https://ko.reactjs.org/docs/hooks-reference.html