66일차 - 두 번째 HA 끝, useEffect

오늘 HA는 React에 대한 HA 테스트를 봤다.

저번에 React에서 너무 고생을 해서 React에 대해 훨씬 많은 공부를 했더니 시험 시간보다 여유있게 끝맞췄다.
React - Redux에 대해 나올 줄 알았는데 주 내용은 React Hooks 였다.
저번 HA때 가장 고생했던 props와 useState에 대해서는 완벽하게 마스터를 하고 시작해서 빠르게 풀었는데 어려웠던 것은 useEffect였다.
그래서 useEffect를 한번 집고 넣어가 볼까 한다.

useEffect

useEffect는 컴포넌트 내의 side effect를 관리한다.
react는 props로 관리하기 때문에 side effect가 없지만, AJAX 요청이 필요하거나, API를 사용하는 경우 side effect가 발생할 수 있다.

우선 useEffect를 사용하려면 아래 같이 useState 처럼 react에서 import해와야 한다.

import {useEffect} from "react";

import를 해옴으로써 useEffect를 사용할 수 있게 된 것이다.

useEffect는 두 가지 인자를 갖는다.
첫 번째 인자는 함수, 두 번째 인자는 배열이다.

함수는 컴포넌트 생성 후 처음 렌더링 되거나, 새롭게 props가 전달될때, 그리고 컴포넌트 상태가 변할때 렌더링된다.
두 번째 인자인 배열은 배열 안에 있는 element들의 값이 변경될 때 useEffect가 실행됨을 의미한다.

예를 들어

import {useEffect, useState} from "react";

export default function App() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    console.log("effect 함수 실행");
  }, [count]);
  
  const handleClickCounter = () => {
    setCount(count + 1);
  };
  
  return (
    <>
      <button onClick={handleClickCounter}>Count : {count} </button>
    </>
  )
}

이렇게 작성하면 console.log("effect 함수 실행")은 count값과 동일한 횟수가 출력될까?
아니다 useEffect는 렌더링될때, 1회 실행되고, 이후에는 count가 변화될 때 마다 실행됨으로 console.log("effect 함수 실행")의 출력은 count 값보다 1회 더 출력된다

만약 렌더링 useEffect를 실행하고 싶으면, 두 번째 인자에 빈 배열 "[]"을 넣어주면 된다.