[React] 특정 코드가 변화했을 때만 코드를 실행시키는법

학습일 : 2023. 03. 16

---

 

 

API 처럼 딱 한번만 호출하고 다시는 호출할 일이 없을 경우에는

  useEffect(() => {
    console.log("어쩌고 저쩌고");
  }, []);

 

처럼 마지막에 [ ] 빈배열을 적어준다.

 

 

 

하지만, 특정 코드가 변화했을 때만 코드를 실행하고자 할 때에는

아래처럼 빈배열이 아니라 배열 안에

인식해주길 원하는 걸 넣어준다.

나는 keyword가 변할 때 인식해주길 바라기 때문에

keyword를 넣어주겠다.

// 이 코드는 keyword가 변화할 때만 실행된다.
// if문을 사용하여 keyword가 뭐 하나라도 적힐때 && 5초과일 경우 console.log 되도록 조건을 준다.

  useEffect(() => {
    if (keyword !== "" && keyword.length > 5) {
      console.log("찾는 영화는", keyword);
    }
  }, [keyword]); // 배열 안 keyword 를 넣어줌 - keyword가 바뀔때만 실행됨.

 

 

전체코드

<App.js>

import { useEffect, useState } 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);
  console.log("저는 항상 실행됩니다!");

  // useEffect 사용하기 - API 처럼 딱 한번만 호출하고 다시는 호출하지 않을 경우 사용
  useEffect(() => {
    console.log("저는 한번만 실행됩니다.");
  }, []); // 빈배열 - 리액트가 더이상 지켜볼 것이 없기 때문에 처음 한번만 실행됨.

  // 이 코드는 keyword가 변화할 때만 실행된다.
  // if문을 사용하여 keyword가 뭐 하나라도 적힐때 && 5초과일 경우 console.log 되도록 조건을 준다.
  useEffect(() => {
    if (keyword !== "" && keyword.length > 5) {
      console.log("찾는 영화는", keyword);
    }
  }, [keyword]); // 배열 안 keyword 를 넣어줌 - keyword가 바뀔때만 실행됨.

  return (
    <div>
      <input
        value={keyword}
        onChange={onChange}
        type="text"
        placeholder="검색할 영화를 입력해주세요!"
      />
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

 

 

실행결과

이처럼 항상 출력되는 문구,

딱 한번만 출력되는 문구,

특정 state가 변화했을때만 실행되는 문구

 

를 볼 수 있다.

 

 

 

---

이처럼 useEffect를 사용하는 방법을 알았으니

응용을 해보면

 

 

<App.js>

이런식으로 응용해볼 수 있겠다.

import { useEffect, useState } 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("저는 한번만 실행됩니다.");
  }, []);
  
  useEffect(() => {
      console.log("저는 키워드가 변화할 때만 실행됩니다.");
  }, [keyword]); 

  useEffect(() => {
    console.log("저는 카운터가 변화할 때만 실행됩니다.");
}, [counter]); 

// 얘는 참고
// useEffect(() => {
//   console.log("저는 카운터 또는 키워드가 변화할 때만 실행됩니다.");
// }, [counter, keyword]); 

  return (
    <div>
      <input
        value={keyword}
        onChange={onChange}
        type="text"
        placeholder="검색할 영화를 입력해주세요!"
      />
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

 

 

 

실행결과