[리액트] useEffect

ReactJS로 영화 웹 서비스 만들기
https://nomadcoders.co/react-for-beginners/lobby
인강을 수강하며 정리한 글 입니다.

useEffect

특정코드의 실행을 제한하고 싶은 경우가 생긴다. component가 처음 render 될때만 실행하고 싶을 때가 있을 것이다. 그럴때 사용하는 것이 useEffect이다.
이 함수를 통해서 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 되었다.

useEffect(effect,deps);

effect: 실행할 코드
deps: 배열이다.

첫번째 인자 effect는 딱 한번만 실행하고 싶은 코드가 될것이다.

deps에 빈 배열을 넣을 경우

import { useEffect,useState } from "react";
import Button from "./Button";

function App() {
  const [counter,setvalue]=useState(0);
  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>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

"i run all the time"은 state가 변할 때 마다 매번 실행되지만
"i run only once." 은 한번만 실행된다.

API를 딱 한번만 호출하고 싶은 경우에 용이하다.

deps에 특정 값을 넣어주는 경우

import { useEffect,useState } from "react";
import Button from "./Button";

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("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;

input 값이 변화할 때마다 search keyword가 출력 되는 것을 확인할 수 있다.

counter 클릭시에도 계속해서 "SEARCH FOR marvel"이 출력되는 것을 확인할 수 있다. 우리는 search keyword에 변화가 있을 때만 marvel 영화를 검색하고 싶은 것이다.

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

위와 같이 키워드 출력 부분 코드를 수정해준다.

위 사진과 같이 counter 실행 시에는 키워드 출력이 안되는 것을 확인할 수 있다.

Clean Up

컴포넌트가 destroy 될 때도 실행시킬 수 있다.

import { useEffect,useState } from "react";
import Button from "./Button";

function Hello(){
  function destroyedFn(){
    console.log("destroyed");
  }
  function createdFn() {
    console.log("created");
    return destroyedFn;
  }
useEffect(createdFn,[]);

  return (
  <h1>Hello</h1>
  );
}

function App() {
  const [showing,setShowing] = useState(false);
  const onClick = () => setShowing((prev) => !prev);
  
  return (
    <div>
      {showing ? <Hello /> : null}
      <button onClick={onClick}>{showing ? "Hide" : "Show"}</button>
    </div>
  );
}

export default App;

Hide를 클릭하면 destroyed가 출력되고 show를 클릭하면 created가 출력된다.
고로 위와 같이 작성하면 컴포넌트가 destroy 될 때를 알 수 있다.

간단하게 정리해보자면

1. 한 번만 실행하고 싶은 경우엔 deps에 빈 배열을 넣기
2. 특정 값이 변화하는 경우에만 실행시키고 싶은 경우엔 deps에 특정 값을 넣어주기
3. 컴포넌트가 파괴될 때 실행하고 싶은 경우엔 effect 함수에 return 코드 작성해주기