⚛️React Training - section05 : useEffect

이번 포스팅에서는 useEffect로 특정 상태가 변화 되었을 때 React가 랜더링이 될 수 있게 할 것이다. 먼저 아래 코드를 살펴보자

import { useEffect } from "react";

export default function SubApp() {

  function onClick() {

    console.log("Click!");

  }

  console.log("I run all the time");

  useEffect(() => {

    console.log("Call The Api..");

  }, [])

 

  return (

    <>

      <h1>useEffect</h1>

      <button onClick={onClick}>Click me</button>

    </>

  )

}

 

SubApp.js:7 I run all the time
SubApp.js:9 Call The Api..

 

//클릭시 호출 되는 함수

SubApp.js:5 Click!

 

우선 해당 코드를 살펴보면 먼저 렌더링이 되는 것은 'I run all the time'이라는 것을 알 수 있다. 해당 컴포넌트가 렌더링 되었고 이후 useEffect에 있는 'Call The Api..'가 호출 되었다. 여기서 useEffect는 한번만 호출이 되는 것을 알 수 있다. 이제 이를 응용해서 특정 영역에 서만 호출이 될 수 있게 해보자. 아래 코드를 살펴보자.

import { useState, useEffect } from "react";

export default function SubApp() {

  const [counter, setCount] = useState(0);

  const [keyword, setKeyWord] = useState("");

  const onClick = () => setCount((prev) => prev + 1);

  const onChange = (event) => setKeyWord(event.target.value);

  useEffect(() => {

    console.log("I run only once.");

  }, []);

 

  useEffect(() => {

    console.log("I run when 'keyword' changes.")

  }, [keyword]);

  useEffect(() => {

    console.log("I run when 'counter' changes.")

  }, [counter]);

  useEffect(() => {

    console.log("I run when keyword & counter change");

  }, [keyword, counter])

  return (

    <>

      <input onChange={onChange}></input>

      <h1>{counter}</h1>

      <button onClick={onClick}>Click me</button>

    </>

  )

}

 

SubApp.js:12  I run only once.
SubApp.js:22 I run when 'keyword' changes.
SubApp.js:26 I run when 'counter' changes.
SubApp.js:30 I run when keyword & counter change

 

//버튼 클릭시

SubApp.js:26 I run when 'counter' changes.
SubApp.js:30 I run when keyword & counter change

해당 코드를 살펴보면 useEffect들 모드 한번씩 호출이 되었음을 알 수 있다. 하지만 두 번째 인자로 주어지는 '[ ]'안에 있는 useState의 값이 변동되면 useEffect가 반응을 하는 것을 확인해 볼 수 있다. 이로인해 useEffect는 특정 state의 변화로 호출 할 수 있다는 것을 알 았다. 우리는 여기서 한번 Memo함수와 useEffect의 차이를 생각해 볼 필요가 있다.