[nomadcoder]ReactJS로 영화 웹 서비스 만들기 #6 [2021 UPDATE] EFFECTS

useEffect

React.js는 새로운 정보를 자동적으로 refresh 해준 다는 점에서 편리하다.
하지만, 때로는 이러한 기능이 불필요할 때가 있다.
예를 들어, 검색창을 이용하는데 버튼 창이 리렌더링 되는 상황이 그렇다.
이렇게 불필요한 리렌더링을 피하기 위해 React.js가 따로 준비한 것이 바로 useEffect이다.
useEffect는 실행시키고자 하는 함수와 React.js가 이벤트를 주시하게끔 하는dependency로 이루어져있다. 즉, 내가 원하는 부분을 지정하여 그 부분만을 변화시킬 수 있는 것이다.
버튼을 누르면 버튼만, 검색창을 이용할 때는 검색창만 리렌더링 되는 것처럼 말이다.

• 두 개의 인자(argument)를 가지는 함수
• 첫 번째 argument는 우리가 딱 한번만 실행하고 싶은 코드
• 두 번째는 [] 배열을 넣어줌

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

-> keyword가 변화할 때 코드를 실행할 거라고 react.js에게 알려주는 것.

useEffect 필요성

렌더링이 계속 된다면, 특히 특정 api를 불러오게 되는 경우 계속해서 불러오는 문제가 생길 수 있다.
state를 변경할 때, 계속해서 렌더링 되는 문제점이 존재한다. 많은 state가 존재한다면 성능 저하 문제가 발생할 수 있다. 이런 문제를 해결하기 위해 사용한다.

예시-검색창 useEffect

import { useState, useEffect } from "react";

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");
  //단 한번만 실행
  useEffect(()=>{
    console.log("i run only oce.");
  }, []);
  //[keyword]가 변화될 때만 실행
  useEffect(()=>{
      console.log("SEARCH FOR", keyword)
  }, [keyword]);
  useEffect(()=>{
      console.log("i run when 'counter' changes.")
  }, [counter]);
  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;

-> useEffect가 컴포넌트의 첫 번째 렌더 시점에 iRunOnlyOnce 함수 호출
그리고 상태를 변화시키면 iRunOnlyOnce는 호출되지 않음
즉, 한번만 렌더링 됨

예시2-useEffect 재실행

import { useState, useEffect } from "react";
function Hello() {
  방법1
  useEffect(()=> {
    console.log("hi");
    return() => console.log("bye");
  }, []);
  방법2
  useEffect(function () {
    console.log("hi");
    return function () {
      console.log("bye");
    }
  }, []);
  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>
  );
}

컴포넌트가 파괴될 때도 코드를 실행할 수 있다.
-> return으로 함수를 만들어주면 된다.
useEffect는 함수를 받고, 이 함수는 dependency가 변화할 때 호출된다.
현재는 dependency가 비어있으니 컴포넌트가 처음 생성될 때 함수가 호출된 후 다시 호출 되지 않는다. 그래서 컴포넌트가 파괴될 때도 함수를 실행하고 싶으면 useEffect 함수가 새로운 함수를 return해야한다.
-> dependency가 비어있으면 자동으로 컴포넌트가 파괴될 때 cleanup함수가 실행되는데 그 과정이 리렌더링으로 useEffect함수가 실행되고 클린업하면서 이전에 있던 이펙트인 console.log(“hi")가 삭제되고 새로운 이펙트 함수인 return함수가 실행되기 때문이다.
리렌더링 -> 이전 이펙트 클린업 -> 이펙트 실행