[REACT] useEffect을 사용하는 이유

안녕하세요 😄 오늘은 useEffect를 사용하는 이유를 공부해봤습니다.

useEffect(effect: React.EffectCallback,React DependencyList) : void

첫번째 argument에는 실행시키고 싶은 코드를, 두번째 argument에는 react.js 가 지켜봐야 할 것이 들어간다. 이것들이 변화할때 react.js가 코드를 실행

import { useState , useEffect } from "react";
  
function App() { //app함수의 반환값이 많아지면 소괄호로 감싼다
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev)=>prev + 1);
  console.log("i run all the time");
  
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>clickme</button>
    </div>
  );
}

export default App;

이 상태로 react를 실행시켜 결과값을 확인해보면

이렇게 매번 실행되는 것을 볼 수 있습니다. 이는 만약 우리가 어떠한 api를 불러냈을때 state 가 변화하면 api를 또 불러낼 것이고 이는 정말 비 효율 적이라는 것을 알 수 있습니다. 이를 해결하기 위해서 useEffect를 사용합니다.

import { useState , useEffect } from "react";
  
function App() { //app함수의 반환값이 많아지면 소괄호로 감싼다
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev)=>prev + 1);
  console.log("i run all the time");

  useEffect(() => {
    console.log("CALL THE API...")
  },[]); //component가 처음 render할 때 실행되고 다시는 실행되지 않을 function을 넣어준다.
  
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>clickme</button>
    </div>
  );
}

export default App;

useEffect(() => {
    console.log("CALL THE API...")
  },[]); //component가 처음 render할 때 실행되고 다시는 실행되지 않을 function을 넣어준다.

이제 useEffect가 추가된 코드를 실행하면

useEffect를 통해서 특정 코드들이 component가 처음 생성될때만 실행되게 바꿀 수 있는 것을 볼 수 있습니다.

두번째 argument에 dependency를 넣어주지 않았기 때문에 , react.js가 지켜볼 대상이 없어 코드가 한번만 실행됩니다.

const [keyword,setKeyword] = useState("");
const onChange = (event) =>setKeyword(event.target.value);

component안에 새로운 함수를 만들어주고 이를 return문안 input으로 추가해준후

<input 
      value={keyword}
      onChange={onChange} type="text" placeholder="Search here..."/>

useEffect(() => {
    if(keyword !== "" && keyword.length >5){
      console.log("I run when 'keyword' changes.");
    }
  },[keyword]); //keyword가 변할때만 실행되는 코드
  useEffect(() => {
    console.log("I run when 'counter' changes. ");
  },[counter]); //counter가 변할때만 실행되는 코드
  useEffect(() => {
    console.log("I run when 'keyword'&'counter' changes. ");
  },[keyword,counter]); //여러개의 속성이 변할때 실행되게 할 수 있음

useEffect의 두번째 parmeter인 dependency에 react.js가 지켜봐야 할 것들을 넣어줍니다.

이와같이 내가 원하는 함수의 코드만 재실행되는 것을 확인 할 수 있습니다.

function Hello(){
    useEffect(()=>{
      console.log("hi :");
      return () => console.log("bye :(");
    },[]);
  }

이런식으로 함수가 종료될때 return 으로 함수를 반환 할 수 있다