[노마드코더]React로 영화 웹 서비스 코딩 - 노트정리(6)

useEffect란?

 

만약 우리가 어떤 api를 불러오는 코드를 작성했을 때, state가 변화하면 api를 또 불러오게 되어 정말 비효율적인 코드가 된다. 이를 해결하기 위해 useEffect를 사용한다.

 

다음 예제를 활용해 useEffect를 이해할 수 있다. 다음 코드는 input에 무언가 입력할때, counter 버튼을 클릭했을 때에 따라 console.log가 작동하는 코드이다.

 

우선 기본적으로 useEffect, useState를 import 해준다.

import { useState, useEffect } from "react";

 

그 후, button과 input에 관련된 state를 각각 만들어주고, 버튼을 클릭했을 때, 그리고 input 값이 변화되었을때 state 값을 변화시켜주는 함수를 만들어 준다.

  const [counter, setValue] = useState(0);
  const [keyword, setKeyword] = useState("");
  
  const onClick = () => setValue((prev) => prev + 1);
  const onChange = (event) => setKeyword(event.target.value);
  
  return (
    <div>
      <input
        value={keyword}
        onChange={onChange}
        type="text"
        placeholder="Search here..."
      />
      <h1>{counter}</h1>
      <button onClick={onClick}>count up</button>
    </div>
	
  );

useEffect를 사용할 때, 첫번째 파라미터에는 함수, 두번째 파라미터에는 deps(배열)을 넣는데, 만약 빈배열([])을 사용하면, 다음과 같이 컴포넌트가 처음 나타날때만 함수가 호출된다.

 

앞서 말했듯 api처럼 한번만 실행되고 싶은 코드는 useEffect를 활용해 다음과 같이 작성할 수 있다.

  useEffect(() => {
    console.log("I run only once.");
  }, []);

 

그렇다면 keyword, counter의 state가 각각 변경될때마다 실행되게 할 수 있을까? 할 수 있다!

// react가 keyword의 state가 변경되는지 보고 있음.
useEffect(() => {
    console.log("I run when 'keyword' changes.");
  }, [keyword]);
  
// react가 counter의 state가 변경되는지 보고 있음.
useEffect(() => {
    console.log("I run when 'counter' changes.");
  }, [counter]);
  
  // react가 keyword, counter의 state가 변경되는지 둘 다 보고 있음.
  useEffect(() => {
    console.log("I run when keyword & counter change");
  }, [keyword, counter]);

 

예제를 정리하여 전체 코드를 작성하면 다음과 같다.

// app.js
import { useState, useEffect } from "react";

function App() {
  const [counter, setValue] = useState(0);
  const [keyword, setKeyword] = useState("");
  const onClick = () => setValue((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 (
    <div>
      <input
        value={keyword}
        onChange={onChange}
        type="text"
        placeholder="Search here..."
      />
      <h1>{counter}</h1>
      <button onClick={onClick}>count up</button>
    </div>
	
  );
}

export default App;

---

처음 실행시 console 창을 확인해 보면 다음과 같다.

 

다음은 input에 어떠한 것을 입력시 console 창이다.

다음과 같이 keyword의 state를 바라보는 useEffect, keyword와 counter의 state를 바라보는 useEffect 총 두개의 useEffect가 반응하는 것을 볼 수 있다.

 

마지막으로 'count up' 버튼을 클릭 시 console 창이다.

마찬가지로 다음과 같이 counter의 state를 바라보는 useEffect, keyword와 counter의 state를 바라보는 useEffect 총 두개의 useEffect가 반응하는 것을 볼 수 있다.

 

 

---

또한, useEffect에서 함수를 반환할 수 있는데 이를 cleanup 함수라고 부른다. cleanup함수는 deps가 비어있는 경우에 컴포넌트가 사라질 때 cleanup 함수가 실행된다. 다음 예제로 이해하면 이해가 더 쉬울 것 같다.

//app.js
import { useState, useEffect } from "react";

function Hello() {

  useEffect(() => {
    console.log("hi :)");
    return () => console.log("bye :(");
  }, []);
  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;

showing이라는 state를 만들어 버튼을 클릭했을 때마다 상태가 변하게 만들고, showing이 true일 때는 <Hello />를 렌더링 해주고, false일 때에는 아무것도 띄워주지 않는다.

 

다음과 같이 Hello라는 함수에 useEffect를 활용해 첫번째 파라미터에 단순히 'hi :)'라고 console을 찍어주는 함수를 작성해 주었고, return을 활용해 cleanup 함수로 'bye :('라고 console을 찍어주는 함수를 작성했다.

 

두번째 파라미터인 deps가 빈 배열([])이기 때문에, 앞서 말했듯 컴포넌트가 처음 나타날때에만 함수가 실행된다. 그 후, 컴포넌트가 사라질때, cleanup 함수가 호출된다.

 

다음과 같이 가 렌더링 되면서 useEffect 함수가 한번 실행되어 'hi :)'가 console에 찍히게 되고, 

 

한번 더 버튼을 누르게 되면, 컴포넌트가 사라지면서 cleanup 함수가 실행되어 'bye :('가 console에 찍히게 된다.

 

Reference

React로 영화 웹 서비스 코딩 강의 - 노마드코더

https://react.vlpt.us/basic/16-useEffect.html

16. useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기 · GitBook