[React] 6-2. Deps 알아보기

📌 Deps

지난 시간에 자세히 살펴보지 않았던 useEffect에 들어가는 두 번째 인자에 대하여 알아보자.

1. 다른 것들은 그대로 두고, search bar를 추가해 보자.

function App() {
  .....
  const [keyword, setKeyword] = useState("");
  .....
  const onChange = (event) => setKeyword(event.target.value);
  .....
  return (
    <div>
      <input
        value={keyword}
        onChange={onChange}
        type="text"
        placeholder="Search here..."
      />
      .....

input은 search bar에 해당하고, input에 value를 주어 state와 연결될 수 있게 한다.

결과로 search bar에다 내용을 입력할 때마다 state가 modify되므로 console 창에 'i run the all time'이 계속 나타나는 것을 볼 수 있다.

그런데 button을 클릭할 때마저 검색 API를 호출하고 싶지는 않다.

다음과 같은 코드를 추가해 보자.

function App() {
  .....
  useEffect(() => {
    console.log("CALL THE API.....");
  }, []);
  console.log("search for", keyword);     // 주목!
  .....

버튼을 눌러 카운트를 증가시키는 것과 검색어를 입력하는 것은 상관관계가 없지만, 버튼을 누를 때 'search for {keyword}'가 i run all the time과 같이 계속 console창에 뜨는 것을 볼 수 있다. 우리는 이것을 원치 않는다.

우리가 원하는 것은 search keyword에 변화가 있을 때만 console 창에 뜨는 것을 원한다. (= 검색을 원한다.) 즉, counter state가 변화할 때가 아닌 movie state가 변화할 때만 search하고 싶은 것이다.

따라서 우리는 코드의 특정한 부분만이 변화했을 때, 원하는 코드들을 실행할 수 있는 방법을 배워야 한다. 이것을 해결하기 위해 useEffect 를 다시 사용한다. 아까 console.log(...) 코드를 useEffect의 첫 번째 인자로 넣어준다.

    .....
    useEffect(() => {
        console.log("search for", keyword);
      }, []);
    .....

여기서 두번째 인자 에 주목해야 한다.

이전 시간에는 빈 배열을 두 번째 인자로 넣어주었었다. 결과로 처음 랜더링 시에만 해당 코드가 작동하고 그 이후에는 어떤 state의 변화가 있어도 작동하지 않았다.

이번에는 [keyword]를 두 번째 인자로 넣어주었는데, 이는 keyword가 변화할 때 코드를 실행할 것이라고 react.js에게 알려주는 것이다.

두 번째 인자는 dependencies(deps) 라고 한다.

즉, 위와 같이 코드를 작성하면 counter state가 변화할 때 더 이상 console.log('search for', keyword) 코드가 실행되지 않을 것이다.

빈 배열을 작성했을 때에도 같은 원리이다. react가 지켜볼 state가 아무것도 없기 때문에 처음 한번만 실행되는 것이다.

결과로 첫 번째에는 모든 코드가 실행되고, 버튼을 눌러서 카운트를 증가시킬 때에는 'i run all the time'만 console창에 뜨고, input에 무언가를 입력할 때만 console창에서 'search for {keyword}'를 볼 수 있다.

하지만 컴포넌트의 시작에서도 검색이 되고 있기 때문에 이 검색창이 완전하다고 볼 수는 없다.

따라서 다음과 같이 조건을 달아줄 것이다.

    .....
    useEffect(() => {
        if (keyword !== "" && keyword.length > 5) {     // 주목!
          console.log("search for", keyword);
        }
      }, [keyword]);
    .....

keyword에 아무 값도 없는 상태가 아니고, keyword에 들어간 값의 길이가 5보다 클 때, console.log('search for', keyword)의 코드가 실행되도록 조건을 추가하였다.

결과로 처음 랜더링될 때 'search for {keyword}'를 제외한 모든 코드가 실행되고, 검색창에 길이가 5 이상인 무언가를 입력중일 때만 위의 코드가 실행되는 것을 볼 수 있다.

무언가 변화할 때 특정 코드를 실행하는 마지막 예시

function App() {
  const [counter, setValue] = useState(0);
  const [keyword, setKeyword] = useState("");
  const onClick = () => setValue((prev) => prev + 1);
  const onChange = (event) => setKeyword(event.target.value);
  // 1. 처음과 state에 변화가 있을 때 그것이 어떤 state라도 항상 실행되는 코드
  console.log("i run all time");
  // 2. 처음 한번만 실행되는 코드
  useEffect(() => {
    console.log("I run only once.");
  }, []); // 빈 배열 주목!
  // 3. keyword가 변화할 때만 실행되는 코드
  useEffect(() => {
    console.log("I run when 'keyword' changes.");
  }, [keyword]); // [keyword] 주목!
  // 4. counter가 변화할 때만 실행되는 코드
  useEffect(() => {
    console.log("I run when 'count' changes");
  }, [counter]); // [counter] 주목!
  // 5. keyword or counter가 변화할 때만 실행되는 코드 (여러개의 state를 동시에 적어줄 수도 있다.)
  useEffect(() => {
    console.log("I run when keyword & counter change");
  }, [keyword, counter]); // [keyword, counter]
  return (
    <div>
      <input
        value={keyword}
        onChange={onChange}
        type="text"
        placeholder="Search here..."
      />
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}