2022-02-07 Effect Hook(2) - 조건부 실행

조건부 effect 발생 (dependency array)

 

useEffect의 두 번째 인자는 배열임.

 

이 배열은 조건을 담고 있음.

 

여기서 조건은 boolean 형태의 표현식이 아닌, 어떤 값의 변경이 일어날 때를 의미하므로

해당 배열엔 어떤 값의 목록이 들어감.

 

이 배열을 특별히 종속성 배열이라고 부름.

 

 

 

이 예제를 열어보고, 개발자 콘솔의 값을 확인해보자.

 

Ex1) 이 예제

import { useEffect, useState } from "react";
import "./styles.css";
import { getProverbs } from "./storageUtil";

export default function App() {
  const [proverbs, setProverbs] = useState([]);
  const [filter, setFilter] = useState("");
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("언제 effect 함수가 불릴까요?");
    const result = getProverbs(filter);
    setProverbs(result);
  }, [filter]);  // 여기보면 useEffect 두번째인자가 [filter]라는 배열이네

  const handleChange = (e) => {
    setFilter(e.target.value);
  };

  const handleCounterClick = () => {
    setCount(count + 1);
  };

  return (
    <div className="App">
      필터
      <input type="text" value={filter} onChange={handleChange} />
      <ul>
        {proverbs.map((prvb, i) => (
          <Proverb saying={prvb} key={i} />
        ))}
      </ul>
      <button onClick={handleCounterClick}>카운터 값: {count}</button>
    </div>
  );
}

function Proverb({ saying }) {
  return <li>{saying}</li>;
}

확인

 

 

여기에는 다음과 같은 세 상태가 존재함.

• 명언 목록 (proverbs)
• 필터링할 문자열 (effect)
• 카운트 (count)

 

이 예제는, filter가 변할 때에만, effect 함수가 실행됨!

 

- 한편, 카운트를 올리는 버튼은 컴포넌트의 상태가 바뀌고 업데이트되지만, 아무리 버튼을 눌러도 effect 함수는 실행되지 않음.

 

왜냐하면, 종속성 배열에는 filter만 존재하고, count는 존재하지 않기 때문

 

질문

• 카운트 버튼을 눌렀을 때에도 effect 함수를 실행시키려면 어떻게 해야 하나요? -> filter뒤에 count 추가

 

API

useEffect(함수, [종속성1, 종속성2, ...])

useEffect의 두 번째 인자는 종속성 배열임.

 

배열 내의 종속성1, 또는 종속성2의 값이 변할 때, 첫 번째 인자의 함수가 실행됨.

 

배열 내의 어떤 값이 변할 때에만, (effect가 발생하는) 함수가 실행됨.

 

단 한 번만 실행되는 Effect 함수

 

만약 종속성 목록에 아무런 종속성도 없다면 어떤 일이 발생할까?

 

다시 말해, 두 번째 배열을 빈 배열로 둘 경우와  use effect의 두 번쨰 인자에 아무것도 넣는 것이랑 같을 까? 다를까?

 

다르다!

 

•  두 번째 인자로 아무것도 없을경우는 컴포넌트가 처음 생성되거나, props가 업데이트되거나, 상태가 업데이트될때 실행됨

 

•  빈 배열을 useEffect의 두 번쨰 인자로 사용하면, 이떄에는 컴포넌트가 처음 생성될 때만 effect 함수가 실행됨

   이게 필요할때는 예를 들어 처음 단 한 번,

   외부 API를 통해 리소스를 받아오고 더 이상 API 호출이 필요하지 않을 때에 사용할 수 있음!