[TIL] useEffect

오늘 공부한것 & 기억하고 싶은 내용

리액트는 state가 변경되면 새로운 정보를 자동적으로 컴포넌트를 refresh 해준다.
때로는 불필요한 렌더링이 될때가 있다.
그럴때 사용하는것이 useEffect다.

useEffect

• 두 개의 argument를 가지는 함수
• 첫 번째 argument는 우리가 딱 한번만 실행하고 싶은 코드 혹은 함수를 넣어줌(실행시키고자 하는 함수)
• 두 번째는 argument는 [] 배열을 넣어줌
  -> React.js가 이벤트를 주시하게끔 하는(지켜보아야 하는 것들) dependency로 이루어져있다.
  -> useEffect는 컴포넌트의 첫 번째 렌더 시점에 iRunOnlyOnce 함수 호출
  그리고 상태를 변화시키면 iRunOnlyOnce는 호출되지 않음
  즉, 처음 한번만 렌더링 됨
• []는 실행시키고자 하는 함수와 React.js가 이벤트를 주시하게끔 하는(지켜보아야 하는 것들) dependency로 이루어져있다.
  즉, 내가 원하는 부분을 지정하여 그 부분만을 변화시킬 수 있음 (선택사항임!)
• react.js가 동작하는 관점에선 방어막 같은 역할을 한다.

const [counter, setCounter] = useState(0);
  const [keyword, setKeyword] = useState("");
  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 > 5) {
      console.log("I run when 'keyword' changes.", keyword);
    }
  }, [keyword]); //리액트가 keyword를 주시하고 있기 때문에 keyword의 변화가 있을때만 찍힘

  useEffect(() => {
    console.log("I run when 'counter' changes.", counter);
  }, [counter]);

  useEffect(() => {
    console.log("I run when 'keyword & counter' changes.", counter);
  }, [keyword, counter]);// 두인자를 다 바라보고 있기 때문에 keyword나 counter의 변화가 생기면 노출 

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

Clean-up

• 정리가 필요한 useEffect ...?
• useEffect는 한번만 실행시켜주는 함수라고 했는데, 반대로 행위를 한 뒤 그 기능을 없애버릴때?(destroy)에도 코드를 작성 할 수 있다.
• 컴포넌트가 사라질 때 실행될 코드는 return 함수 안에다가 넣어주면 됨

import { useEffect, useState } from "react";

function Hello() {
  useEffect(() => {
    console.log("created!");
    return () => { //컴포넌트가 사라질때 실행될 코드
      console.log("Destory");
    };
  }, []); //딱 한번만 노출
  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>
  );
}

useMemo와 useEffect의 차이는 무엇일까?

useEffect : 생명주기에서 생성과 관련된 기능으로, 값을 기억해 놓고 deps가 변경될 경우에만 다시 계산하는 기능(첫 렌더링이 완료된 후에 실행)
useEffect : 사이트이펙트 등 한번만 호출해도 될 기능들이 렌더링되어 실행되거나 호출 과정에서 렌더링에 영향을 끼칠 수 있는 것들을 모아 따로 처리하기 위한 기능(렌더링 중에 실행)

배운점 & 느낀점

오늘은 useEffect를 오랜만에 다시 복습 차원에서 강의를 들었다.
듣다보니 전에 배웠던 useMemo와의 차이점이 뭘까? 하다가 좀 찾아보니 가장 큰 차이점은 첫 렌더링이 끝나고와 렌더링 중에 차이였다.
몇개의 게시글을 읽어보긴 했는데 개념이 아직은 생소해서 정확하게 이해하기는 힘들었지만 이번엔 렌더링 순서의 차이가 가장 크다는 것만 알고 넘어가면 될듯!