useEffect

useEffect의 필요성에 대해서 얘기해보려고 한다.

state가 변화시킬때 component를 재실행되고, 모든 코드가 재실행된다. UI관점으로 보면, 새로운 데이터가 들어올 때마다 자동으로 새로고침되는데(리랜더링), 어떤 코드들은 계속 실행되면 안되는 경우도 있다.
이때 필요한 것이 useEffect이다.

useEffect에는 2개의 argument로 구성되있는데,
첫번째 argument는 실행하려는 코드,
두번째 argument는 dependency 로 이루어져 있다.

dependency가 존재하면, 해당 리스트의 값이 변화할때만 실행된다.

useEffect를 통해 우리는 언제 코드를 실행할 지 선택권을 가질 수 있다.

예를 들어 이 코드에서 api를 호출한다고 가정했을때, 컴포넌트에서 rendering이 처음 실행됐을때만 api를 가져오고 이후 랜더링을 했을때는 실행되는 것이 싫다고 하면 어떻게 할까 고민을 할 것이다.
현재 코드에서는 state가 변경될때마다 계속 실행이 될 것이다.
하지만 우리가 API를 호출하거나, 중요한 작업을 할때에는 이걸 계속 반복하는 것이 아닌 딱 한번만 실행되기를 원한다.

이때 필요한 것이 useEffect이다.
useEffect는 두 개의 argument 를 가지는 함수이다.

첫번째 argument는 우리가 딱 한번만 실행하고 싶은 코드이다.
두번째 argument는 배열 [] 을 준다.

이 코드를 보면,

console.log("i run all the time");는 onClick을 할때마다 즉, state가 바뀌면서 reRendering 할때마다 실행된다.

하지만 iRunOnlyOnce 함수에 있는 console.log("i run only once") 함수는 useEffect 에 의해 처음 랜더링 될때만 실행되고 이후에는 재랜더링 할때 (state가 바뀔때마다) 실행되지 않는다.

참고로 useEffect는 화면이 다 그려지고 나서 실행된다. 즉 화면을 먼저 그리고 그다음 실행된다. 이는 생명주기(lifecycle)와 연관이 되있다. useEffect 내에 코드가 실행되는 시점이 컴포넌트의 렌더링 이후라는거 중요한 정보이다. 컴포넌트 함수 내에 있는 일반적인 다른 코드들보다도 use effect가 늦게 실행된다.

정리를 하면..

useEffect

• 두 개의 argument를 가지는 함수
• 첫 번째 argument는 우리가 딱 한번만 실행하고 싶은 코드
• 두 번째는 [] 배열을 넣어줌
  -> useEffect가 컴포넌트의 첫 번째 렌더 시점에 iRunOnlyOnce 함수 호출
  그리고 상태를 변화시키면 iRunOnlyOnce는 호출되지 않음
  즉, 한번만 렌더링 됨
  단순화 하여 useEffect(() => {
  console.log("CALL THE API")
  },[]); 써도 됨

import { useState, useEffect } from "react";

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

  const onClick = () => setCounter((prev) => prev + 1);
  const onChange = (event) => setKeyword(event.target.value);

  console.log("I run all the time");

  useEffect(() => {
    console.log("i run only once.");
  }, []);

  useEffect(() => {
    if (keyword != "" && keyword.length > 4) {
      console.log("i run only when 'keyword' changes");
    }
  }, [keyword]);

  useEffect(() => {
    console.log("i run only wnen 'counter' changes");
  }, [counter]);

  return (
    <div>
      <input
        counter={keyword}
        onChange={onChange}
        type="text"
        placeholder="Search here..."
      />
      <button onClick={onClick}>Click Me</button>
      <h1> {counter}</h1>
    </div>
  );
}

export default App;

이 코드에서

  useEffect(() => {
    console.log("i run only once.");
  }, []);

배열에 아무 argument가 없으므로 처음에 실행될때만 1번만 실행이 된다.

하지만

  useEffect(() => {
    if (keyword != "" && keyword.length > 4) {
      console.log("i run only when 'keyword' changes");
    }
  }, [keyword]);

useEffect의 두번째 argument인 배열에 값 value를 넣어주면 그 value가 변할때만 useEffect에 있는 코드가 실행된다.

응용하여 2개의 argument도 배열에 넣을 수 있다.

  useEffect(() => {
    console.log("i run only wnen 'counter & keyword' changes");
  }, [counter, keyword]);

<정리>

useState, useEffect 모든 정리를 하자면..