Introduction

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;

위와 같은 코드를 사용할 경우, 첫번째 api에만 코드가 실행되고 state가 변화되면 또 다시 api를 불러온다는 문제가 발생한다.

⇒ 위와 같이 첫번째 api에서 실행이 되는 것이 아니라 state가 변화되면 계속해서 다시 불러오게 된다.

UseEffect

위에서 발생한 문제점을 UseEffect를 통해서 해결해보고자 한다.

const onClick = () => setValue((prev) => prev + 1);
  console.log("i run all the time");
  useEffect(() => {
    console.log("CALL THE API....");
  }, []);

위와 같은 코드를 작성한 뒤 결과를 보고자 한다.

• 위와 같은 문제점이 해결이 되고, Call The API만 변경될 때마다 불러오게 된다.

Deps

  useEffect(() => {
    console.log("I run when 'keyword' changes.");
  }, [keyword]);

⇒ [keyword]라고 쓰면서, keyword가 변할때만 해당 useEffect가 수행되도록 한다.

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]);

⇒ keyword, counter, keyword&counter change 각각이 실행되도록 useEffect를 활용하여 만들 수 있다.

Clean up

function Hello() {
  return <h1>Hello</h1>;
}

{showing ? <Hello /> : null}

⇒ showing이 true면 Hello를 보여주도록 하게 된다

useEffect(() => {
  console.log("created:)");
  return () => console.log("destroyed :(");
}, []);

• return function () → clean up function, destroyed 될 때 보여주도록 하는 function이다.

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

⇒ 위와 같이 hi function을 찍어주었다가, 사라질 때 bye를 하는 것 또한 가능하다.

Reference

해당 챕터 내용을 정리한 Git
https://github.com/inpyu/React-Practice/issues/5

원본 강좌 링크
https://nomadcoders.co/react-for-beginners/lobby