[노마드/React로 영화 웹 서비스 만들기] Ch06 EFFECTS | 2. Deps

참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby

1.  uesEffect의 두 번째 인자

---

특정 동작을 하면 특정 코드만 실행하도록 만들어보자!

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' changes");
  }, [keyword, counter]); 

  return (
    <div>
      <input 
        value={keyword}
        onChange={onChange} 
        type="text" 
        placeholder="Search here..."
      />
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

👉🏻전체 코드!

• 먼저 keyword state를 추가적으로 만들어주고 onChange라는 함수를 담은 input을 추가해준다.

useEffect(() => {
  console.log("i run when 'keyword' changes");
}, [keyword]);

👉🏻해당 코드를 추가해준다. useEffect의 두 번째 인자에 keyword state를 담아주었다. 이는 keyword값이 변할 때만 해당 코드를 실행하게 하고 싶다고 react에게 말해주는 역할을 한다. 그럼 리액트가 keyword값을 항상 주시하며 값이 변할 때마다 해당 코드를 실행해준다. 아래 코드와 비교해보자!

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

👉🏻이 코드는 딱 한번만 실행하는데 두 번째 인자 안에 아무 값도 안 넣어줬기 때문에 리액트가 지켜볼 값이 없기 때문이다.

처음 실행할 때의 모습

useEffect 코드만 실행

👉🏻input에 값을 넣으며 keyword값이 변해 useEffect 내부의 코드만 실행되고 있다!