Effect Hook (2) - 조건부 실행(dependency array), 명언제조기 filter

1. 조건부 effect 발생(dependency array)

 

useEffect의 두 번째 인자는 '배열'. 이 배열은 조건을 담고 있다. 

이 조건은 boolean형식이 아닌, 어떤 값의 목록이 들어간다. 

이 배열을 '종속성 배열'이라고 부른다. 

useEffect(함수, [종속성1, 종속성2, ...]) : 배열 내의 종속성1, 종속성2의 값이 변할 때 첫번째 인자인 함수가 실행된다.

 

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);
//상태가 총 3개. proverb, filter, count

  useEffect(() => {
    console.log("언제 effect 함수가 불릴까요?");
    const result = getProverbs(filter);
    setProverbs(result);
  }, [filter]);
//useEffect의 두번째 인자에 종속성 배열[filter]가 들어갔다. 
//[filter, count]를 넣게되면 filter or count가 변경될때 첫번째 함수가 실행.
//componentDidMount + 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>;
}

App컴포넌트 랜더 후, useEffect 첫번째 인자 함수 실행 --> console창에 "언제 effect함수 불릴까요?"

 

위 코드에서 input태그 text란에 무언가를 적게되면

1. input tag의 onchange 이벤트로 등록된 handleChange가 실행되면서 

2. setFilter함수로 인해 filter변수가 text란에 적은 걸로 변경된다. 

3. state가 변경되었으므로 App컴포넌트 re-render 

4. render 후, useEffect 첫번째 인자인 함수 실행

5. console창에 "언제 effect함수 불릴까요?"

 

2. 단 한번만 실행되는 useEffect함수 ( componentDidMount )

useEffect(함수, []) : 두 번째 인자로 빈 배열이 들어올 경우, 컴포넌트가 처음 생성될 때만 effect함수 실행된다.

ex: 처음 단 한번, 외부 API를 통해 리소스를 받아오고 더이상 API호출이 필요하지 않을 때.