[React] useEffect Hook

안녕하세요.
이번 시간은 React에 내장된 기본 Hook useState, useEffect, useContext 중 useEffect 에 대해 공부 한 내용을 정리해보겠습니다.

Hook에 대해 더 알고 싶다면 공식 문서를 참조하기를 권장드려요. https://ko.reactjs.org/docs/hooks-intro.html

useEffect Hook이란?

공식 문서를 보니 아래와 같이 정의 되어 있고, 명령형 또는 어떤 effect를 발생하는 함수를 인자로 받는다.

useEffect(didUpdate);

useEffect는 컴포넌트에서 부수 효과 처리할 때 사용하는 훅입니다.

📌 부수 효과란 무엇일까?

함수 실행시 함수 외부의 상태를 변경하는 연산을 부수 효과하고 부른다.

useEffect를 언제 사용하면 좋을까?

특별한 이유가 없다면 모든 부수 효과는 useEffect hook에서 처리하는게 좋다.

📗 예제를 통해 언제 사용하면 좋은지에 대해 알아보자.

import React, { UseEffect, useState } from 'react';

function App({ userId }) {
  const [user, setUser] = useState(null);   // API 결과값을 저장할 상태값

  useEffect(async () => {
   const userDate = await loadUserData(uesrId);   // 부수 효과 함수에서 API로 받아온 데이터를 user 상태값에 저장
   setUser(userDate);
  }, [userId]);   // 의존성 배결을 입력하여 userId값이 변경되는 경우에만 API 통신하도록 설정
  
  return (
    <div>
     <p>이름: {user.name}</p>
     <p>나이: {user.age}</p>
    </div>
   );
 }

✏️ 더 나아가기

부수 효과 함수는 렌더링할 때마다 호출되므로 불필요한 함수 호출을 하게 되는데, 이를 방지하기 위해 두 번째 매개변수로 배열을 입력하면, 배열의 값이 변경되는 경우에만 함수 호출된다. 이 배열을 의존성 배열이라고 한다.
의존성 배열로 빈 배열을 입력하면 컴포넌트가 생성될 때만 부수 효과 함수가 호출되고, 컴포넌트가 사라질 때만 반환된 함수가 호출된다.

참고문서 : 실전 리액트 프로그래밍 [이재승 지음, 인사이트]