[React] 리액트 useEffect 사용방법

리액트 개발을 진행할 때, 특정 컴포넌트가 처음 호출될 때 특정 명령어를 실행하기 위해 useEffect를 사용합니다. 
useEffect는 컴포넌트가 마운트 될때 그리고 언마운트 될 때 처리할 로직 작성해서 컴포넌트 실행 간에 값을 계산하거나 
컴포넌트가 언마운트될때  특정 값을 반환 혹은 정리할 때 사용합니다. 

useEffect의 기본 사용방법은 아래와 같습니다. 

  useEffect(() => {
    //마운트시 동작할 로직
    return () => {
      //언마운트시 동작할 로직
    };
  }, []);//체크할 변수

위에 코드에 // 마운트시 동작할 로직, 언마운트시 동작할 로직을  작성하고 해당 컴포넌트가 호출될 때 동작하게 되어있습니다. 
그리고  [] 해당 영역에는 useEffect를 동작하도록 하는 변수명을 작성할수 있는데 예를 들어 [key]라고 작성 시에는 key 변수의 값이 변경될 시 해당 useEffect가 실행되도록 할 수 있으며 []가 비워져 있을 경우에는 컴포넌트 마운트시만 동작하도록 되는 구조입니다. 

아래 예제는 그냥 생각나는대로 작성해 본 참고용 예제입니다. 

App.js

import "./styles.css";
import React, { useState, useEffect } from "react";
import TestComponent from "./component/TestComponent";

export default function App() {
  const [button, setbutton] = useState("on");
  const buttonTest = (e) => {
    if (button == "on") {
      setbutton("off");
    } else {
      setbutton("on");
    }
  };

  return (
    <div className="App">
      {button == "on" ? (
        <>
          <TestComponent />
        </>
      ) : (
        <></>
      )}
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={buttonTest}>tttt</button>
    </div>
  );
}

 

TestComponent.js

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

export default function TestComponent() {
  const [text, setText] = useState("테스트텍스트");

  useEffect(() => {
    console.log("테스트컴포넌트 마운트");
    return () => {
      console.log("테스트컴포넌트 언마운트 ");
    };
  }, []);

  const onChange = (e) => {
    setText("이런 이런 ");
  };

  return (
    <>
      <div>{text}</div>
      <button onClick={onChange}>텍스트변경</button>
    </>
  );
}

위에 코드는 app.js 에서 testComponent를 호출할 때 useEffect를 호출하는 간단한 소스이며,
App.js의 버튼을 클릭하면  testComponent를 호출하도록 되어있습니다. 아래 코드 샌드박스 공간도 임베딩 되어있으니 테스트해 볼 수 있습니다. 

해당 예제에서 ttt 버튼을 클릭 시 테스트 텍스트 문구가 나오면서 console로그에 테스트 컴포넌트 마운트 로그를 확인할 수 있습니다. 
그리고 텍스트 변경 버튼을 눌러 서 다시 렌더링이 되더라도 해당 console로그는 호출되지 않지만 ttt 버튼을 눌러서 해당 컴포넌트를 언마우드 시킬 경우 return()에 의해서 테스트 컴포넌트 언마운트가 되는 것을 확인할 수 있습니다. 

간혹 리액트를 하다 보면 상태관리를 위해 로컬 상태관리를 위해 useState를 사용하는데  컴포넌트다 언마운트 되지 않을 경우 useState의 값이 그대로 보존되는 경우가 있습니다.  그런 때 내가 작성한 로직에 의해 컴포넌트가 잘 언마운트되었는지 등등을 useEffect로 확인할 수 있습니다.