useEffect

리액트를 하다보면, 컴포넌트가 바뀌거나 프롭스로 내린 내용이 변경이 되면 무조건 랜더링이 다시 된다.
하지만, 랜더링이 자주 반복이 되면 여러 측면에서 비용과 시간이 늘어난다.
그렇기 때문에 특정 기능은, 랜더링이 여러번이 아니라 한 번만 되었으면 좋겠다는 생각을 한다.

그럴 때 쓰는 게 바로 useEffect이다.

가령 내가 백엔드 서버의 api를 받아온다고 생각을 해보자.
나는 딱 1번만 받아왔으면 좋겠는데, 이게 내가 뭘 실행을 할 때마다 계속 받아온다고 생각을 해보자
나 하나쯤이면 괜찮지만, 이용자가 10명, 100명, 1000명, 10000명이 사용을 하는데, 계속 서버에서 api를 받아오는걸 요청한다고 생각해보자.

그럼 비용적 측면으로 볼 때는 정말 어마어마하게 달라질 것이다.

그렇기 때문에 useEffect를 통해서 api 받아오는 요청을 딱 1번만 하는 것이다.

ex)

import { useEffect, useState } from "react";

function App() {
  const [counter, setValue] = useState(2);
  const onClickHandler = () => {
    setValue((prev) => prev + 1);
  };
  console.log(
    "이거는 useEffect를 사용 안해서 계속 바뀔 때 마다 랜더링이 된다."
  );

  useEffect(() => {
    console.log(
      "여기는 use?Effect를 통해서 사용했기 때문에 1번만 랜더링이 된다."
    );
  }, []);

  return (
    <div>
      <h1>Welcome</h1>
      <h2>{counter}</h2>
      <button onClick={onClickHandler}>Plus</button>
    </div>
  );
}

export default App;

import { useEffect, useState } from "react";

function App() {
  const [counter, setValue] = useState(0);
  const [keyword, setKeyword] = useState("");

  const onClickHandler = () => {
    setValue((prev) => prev + 1);
  };

  const onChangeKeyword = (e) => {
    setKeyword(e.target.value);
  };

  useEffect(() => {  // 화면이 랜더링 될 때 1번만 실행
    console.log("i run all the Time"); 
  }, []);

  useEffect(() => { // 키워드가 있어야하고, 5자 이상일 때, 키워드 값이 바뀌면 랜더링되게해라
    if (keyword !== "" && keyword.length > 5) {
      console.log("i run only keyword change");
    }
  }, [keyword]);

  useEffect(() => { // 카운터 값이 1 이상이고, 카운터 값이 올라갈 때마다 랜더링을 해라  
    if (counter !== 0) {
      console.log("i run only counter change");
    }
  }, [counter]);
  return (
    <div>
      <input onChange={onChangeKeyword} value={keyword} />
      <h1>Welcome</h1>
      <h2>{counter}</h2>
      <button onClick={onClickHandler}>Plus</button>
    </div>
  );
}

export default App;

useEffect(() => something(), [변수A]) 라고하면, 변수A가 변경될 떄 마다 useEffect는 실행된다. 변수A가 변경되면, 이전의 변수A 값을 가지고 return 함수가 실행된다.
ex) 변수A =1 ->2 변경되는 시점에서 , useEffect()에서 return 외에는 변수A는 2이고, return 상황에서는 변수A는 1이다.
뒤에 [ dependency ]에 아무것도 없다면( ex) [] ) 첫 렌더링시에 실행되고, return은 컴포넌트 unmount시(영상의 destroy시) 실행된다.

import React, { useEffect } from "react";

const Hello = () => {
  const byeFin = () => {
    console.log("bye");
  };

  const hiFin = () => {
    console.log("created");
  };

  useEffect(() => {  //useEffect를 통해, 해당 페이지에 랜더링을 하면 hiFin이 실행이 된다.
    // 추가로 해당페이지를 다시 벗어나게되면, byeFin이 실행이된다.
    hiFin();
    return byeFin;
  }, []);

  return <div>Helo</div>;
};

export default Hello;