[React] 8. Effects

state가 변화할 때 모든 component가 다시 실행되고, code들도 다시 실행됩니다. 그러나 component 내의 몇몇 코드들은 처음 한 번만 실행되고 다시 실행되지 않도록 할 필요가 있습니다. 이럴 때 Effect를 사용해주면 됩니다.

 

아래 코드에서 "call an api"는 한 번만 실행하면 되는 로그입니다. 그러나 버튼을 클릭할 때마다 항상 실행됩니다.

import { useState } from "react";

function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev + 1);
  console.log("call an api");

  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

 

useEffect

useEffect를 사용하면 코드가 처음 실행될 때 한 번만 실행되고, state가 바뀌어도 다시 실행되지 않습니다.

import { useState, useEffect } from "react";

function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev + 1);
  console.log("i run all the time");	// state가 변화하면 항상 실행됨
  const iRunOnlyOnce = () => {
    console.log("i run only once");	// state가 변화해도 처음 한 번만 실행됨
  }
  useEffect(iRunOnlyOnce, []);
  useEffect(()=>{
    console.log("CALL THE API...");	// state가 변화해도 처음 한 번만 실행됨
  }, []);

  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

 

useEffect(() => {코드}, [지켜볼 대상]);

지켜볼 대상이 없으면, 코드는 한 번만 실행됩니다.

지켜볼 대상이 있으면, 코드는 그 대상이 변화할 때마다 실행됩니다.

 

따라서 useEffect를 이용하면 컴포넌트 변화에 따른 코드 실행을 변화시킬 수 있습니다.

 

function Hello() {
  useEffect(() => {
    console.log("created :)");	// 컴포넌트가 생성될 때 실행됨
    return ()=>console.log("destroyed :(");	// 컴포넌트가 소멸될 때 실행됨
  }, []);
  return <h1>Hello</h1>;
}

위 코드를 통해 컴포넌트가 언제 생성되고, 언제 소멸되는지를 확인할 수도 있습니다.

 

function Hello() {
  function byFn() {
    console.log("bye : (");
  }
  function hiFn() {
    console.log("created :)");
    return byFn;
  }
  useEffect(hiFn, []);
  return <h1>Hello</h1>;
}

React.js가 hiFn을 실행하고, component가 파괴될 때에 React.js는 hiFn이 return한 byFn을 실행합니다.

 

즉, useEffect를 사용하면 시작할 때만 code를 실행하게 할 수도 있고, 무언가가 변화할 때 code가 실행되게 할 수도 있고, component가 파괴될 때 code가 실행되게 할 수도 있습니다.

 

useEffect를 사용한 예시

import { useState, useEffect } from "react";

function Hello() {
  useEffect(() => {
    console.log("hi: )");
    return ()=> console.log("by :(");
  }, []);
  useEffect(function() {
    console.log("hi: )");
    return function() {
      console.log("by :(");
    }
  }, []);
  return <h1>Hello</h1>;
}

function App() {
  const [showing, setShowing] = useState(false);
  const onClick = () => setShowing((prev) => !prev);
  return (
    <div>
      {showing ? <Hello /> : null}
      <button onClick={onClick}>{showing ? "Hide" : "Show"}</button>
    </div>
  );
}

export default App;

 

 

출처 : 노마드코더