useEffect

hyj3363·2022년 4월 29일
0

useState에 이어서 useEffect를 정리해볼까 한다.

useState는 그 안에 있는 값이 변화할때마다 App.js안에 있는 다른 함수들도 자동으로 호출이 된다.
만약 여러번 호출되지 않기를 원하고 딱 한번만 호출 하길 원한다면 useEffect를 사용하면 된다.

코드를 살펴보자.

useEffect 사용 전

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

위 코드에서 keyword 또는 counter를 변경하면 위에 있는 모든 함수가 다시 호출될 것이다.
keyword를 변경할 때 counter을 호출하고 싶지않고 counter를 변경할 때 keyword를 호출하고 싶지않다면 useEffect를 사용하면 된다!

useEffect 사용 후

function App() {
  const [counter, setValue] = useState(0);
  const [keyword, setKeyword] = useState("");
  const onClick = () => setValue((prev) => prev +1);
  const onChange = (e) =>{setKeyword(e.target.value)};
  useEffect(()=>{
    console.log("i run only once");
  },[]);
  useEffect(()=>{
    console.log("i run when 'keyword' changes.");
  },[keyword]); //keyword가 변화될때만 실행됨
  useEffect(()=>{
    console.log("i run when 'counter' changes.");
  },[counter]); //counter가 변화될때만 실행됨
  return (
    <div>
      <input onChange={onChange} type="text" placeholder="Search here..."/>
      <h1>{counter}</h1>
      <button onClick={onClick}>Click me</button>
    </div>
  );
}

다시 위 코드에서 useEffect를 살펴보면
useEffect내에서 첫번째는 실행시킬 함수를 작성하고 ,(콤마)뒤에는 의존키워드를 작성한다.

useEffect(function, deps)

deps는 'Array'형태로 한가지이상의 키워드를 작성할 수 있다. 여러 개를 입력한다면 그 중 하나가 변화될 때마다 함수가 호출된다.
위 코드의 경우 콘솔로 확인하기 위한 콘솔로그 함수를 입력했고
deps에는 useState의 value인 counter와 keyword를 입력했다.

deps에 입력된 값들이 변경 될 때마다 useEffect내에 함수들이 호출되는 것이다.

만약 deps를 아예 비워놓는다면 렌더링될 때마다 호출될 것이다.
deps에 빈 배열인 []만 적어 놓는다면 무조건 처음에 한번만! 호출될 것이다.
여기서 알아야 할 점은 useEffect에 어떤 dependency를 설정하더라도 처음에는 무조건 한번 호출 된다는 것이다. 그 후에는 deps에 작성된 키워드에 변화가 생길때만 호출이 된다.

코드를 언제 사용할지 선택해서 불필요하게 호출되는 현상을 막는 것이 useEffect이다. 유용하게 사용해보자!

profile
Front-end Web Developer

0개의 댓글