React | nomadcoders 4/n

#6.2 Deps

이제 useEffect의 두번째 인자가 뭔지 알아볼건데
(미리 말하자면 Dependencies ; Things React should watch)
우선 search bar를 하나 만들어보자

아래 코드를 실행해본다

• 사용자가 input에 입력한 값은 event.target.value로 확인할 수 있다.

import { useEffect, useState  } from "react";
function App(){
  const [counter, setValue] = useState(0);
  const [keyword, setKeyword] = useState("")
  const onChange = (event) => setKeyword(event.target.value);
  const onClick = () => setValue((prev) => prev + 1);
  console.log('i run all the time');
  const iRunOnlyOnce = () => {
    console.log("i run only once");
  }
  useEffect(iRunOnlyOnce, []);
  return(
    <div>
      <input 
      value={keyword} 
      onChange={onChange} 
      type="text" 
      placeholder="Search here"/>
      <h1>{counter}</h1>
      <button onClick={onClick}>Click me</button>
    </div>
  )
}

export default App;

코드설명: return에서 input태그의 onChange 이벤트 리스너를 설정해주었다. input태그에 onChange 이벤트가 일어나면 {onChange}로 정의된 함수를 실행한다 - onChange함수는 해당 이벤트를 일으킨 태그의 값(input의 value값)을 가져와 keyword값으로 설정해주는 함수로 정의되어 있음 -> 그대로 실행되면 keyword 변수가 input에 사용자가 적어둔 값으로 바뀐다 -> input의 value값이 keyword이므로 input의 value가 keyword값으로 바뀐다.

❓ 그냥 값을 쓰기만 하면 되는 걸 왜 이렇게 복잡하게 value값을 정해주는가?

jsp 기반 html에서는 input에 값을 입력하면 지정된 value속성과 상관없이 칸에 값이 입력되는데, React에서는 value속성만 지정하면 value속성으로만 값을 컨트롤할 수 있는 권한이 있어 그냥 값을 입력하면 값이 입력되지 않는다. 따라서 onChange로 input을 수정가능한 상태로 만들어줘야 한다.
출처: https://kmhan.tistory.com/316

아무튼 코드를 실행하고 검색창에 값을 입력해보면 타이핑하는 순간순간마다 i run all the time이 console에 출력된다. useEffect를 써야 하는 또 다른 이유.

---

아래 코드를 실행할 경우 console에는 다음과 같이 찍힌다.

import { useEffect, useState  } from "react";
function App(){
  const [counter, setValue] = useState(0);
  const [keyword, setKeyword] = useState("")
  const onChange = (event) => setKeyword(event.target.value);
  const onClick = () => setValue((prev) => prev + 1);
  console.log('i run all the time');
  useEffect(() => {
    console.log("CALL THE API....");
  }, []);
  console.log("SEARCH FOR", keyword);
  return(
    <div>
      <input 
        value={keyword}
        onChange={onChange}
        type="text" 
        placeholder="Search here..."/>
      <h1>{counter}</h1>
      <button onClick={onClick}>Click me</button>
    </div>
  )
}

export default App;

이때는 click me를 클릭해도 역시 'SEARCH FOR marvel'이 찍힌다.
여기서 우리가 하고 싶은 것은 counter가 변화할 때가 아니라, keyword가 변화할 때만 marvel 영화를 검색하고 싶은 것이다(console에 찍히도록 하는 것이다).

이를 위해 다음과 같이 코드를 바꾸면

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

검색은 단 한 번만 실행될 텐데, 우리가 원하는 건 그게 아니라 keyword가 변화할 때만 코드를 실행하는 것이다. 이럴 때 두 번째 인자를 사용한다.

만약 keyword가 변화할 때 코드를 실행하고 싶다면, 대괄호 안에 keyword를 적는다.

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

그러면 react.js에게 keyword가 변화할 때 코드를 실행할 거라고 알려주는 것이 된다.

처음 컴포넌트를 실행할 때는 입력값이 없는데도 코드가 실행되기 때문에, keyword가 빈 값이 아니라는 조건을 넣어준다. 길이가 5를 넘을 때만 검색되는 조건을 넣어줄 수도 있다.

import { useEffect, useState  } from "react";
function App(){
  const [counter, setValue] = useState(0);
  const [keyword, setKeyword] = useState("")
  const onChange = (event) => setKeyword(event.target.value);
  const onClick = () => setValue((prev) => prev + 1);
  console.log('i run all the time');
  useEffect(() => {
    console.log("CALL THE API....");
  }, []); 
  useEffect(() => {
    if(keyword !== "" && keyword.length > 5) {
      console.log("SEARCH FOR", keyword);
    }
  }, [keyword]);

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

export default App;

이번엔 각각 keyword, counter가 변할 때, 그리고 둘 중에 하나가 변할 때 찍히는 코드를 만들어보자.
keyword와 counter 모두 state변수라는 걸 기억해야 한다.

  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]);

정리하면, 두번째 인자에
1. 아무것도 넣지 않으면 - 처음 1번만 실행.
2. 변수 하나를 넣으면 - 해당 변수가 변화할 때만 실행됨.
3. 배열을 넣으면 - 하나라도 변화하면 실행됨.