React #6. useEffect 의 사용 목적과 방법

지난 시간까지 리액트에서 컴포넌트를 재 랜더링할때 해당 컴포넌트의 모든 코드를 실행해 UI 를 변경했었다. 하지만 이는 불필요한 부분까지 다시 실행시켜 자원을 낭비하기 때문에 useEffect 를 사용하여 이를 줄여볼 것이다.

import Button from "./Button";
import styles from "./App.module.css";
import { useState, useEffect } from "react";

function App() {
  const [counter, setValue] = useState(0);
  const [keyword, setKeyword] = useState("");
  const onClick = () => setValue((prev) => prev + 1);
  const onChanage = (event) => setKeyword(event.target.value);
  console.log('i run all the time');
  // 최초 한번만 아래의 코드가 실행된다.
  useEffect(() => {
    console.log('i run only once');
  }, []);
  // keyword 가 변환할때 아래의 코드가 실행된다.
  useEffect(() => {
      console.log('i run when "keyword" changes.');
  }, [keyword]);
  // counter 가 변환할때 아래의 코드가 실행된다.
  useEffect(() => {
    console.log('i run when "counter" changes.');
  }, [counter]);  
  // keyword 또는 counter 가 변환할때 아래의 코드가 실행된다.
  useEffect(() => {
    console.log('i run when "keyword" & "counter" changes.');
  }, [keyword, counter]);    
  return (
    <div>
        <input
          value={keyword} 
          onChange={onChanage} 
          type="text" 
          placeholder="Search here..."/>
        <h1>{counter}</h1>
        <button onClick={onClick}>Click me</button>
    </div>
  );
}

export default App;

아래 코드는 두번째 인자에 빈 배열을 입력하게 되면 최초 한번만 실행된다. 

  // 최초 한번만 아래의 코드가 실행된다.
  useEffect(() => {
    console.log('i run only once');
  }, []);

그리고 useEffect 는 컴포넌트가 생성, 파괴된 시점에 코드를 실행할 수 있다. 첫번째 인자로 들어간 함수는 컴포넌트가 생성될때 실행되고, 리턴값을 파괴되었을때 실행할 함수로 인지한다.

function Hello() {
  const byeFn = () => {
    console.log('bye :(');
  }
  const hiFn = () => {
    console.log('hi :)');
    return byeFn;
  }
  useEffect(hiFn, []);
  return <h1>Hello</h1>;
}