안녕하세요.
이번 시간은 React에 내장된 기본 Hook useState, useEffect, useContext
중 useEffect
에 대해 공부 한 내용을 정리해보겠습니다.
Hook에 대해 더 알고 싶다면 공식 문서를 참조하기를 권장드려요. https://ko.reactjs.org/docs/hooks-intro.html
공식 문서를 보니 아래와 같이 정의 되어 있고, 명령형 또는 어떤 effect를 발생하는 함수를 인자로 받는다.
useEffect(didUpdate);
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>
);
}
부수 효과 함수는 렌더링할 때마다 호출되므로 불필요한 함수 호출을 하게 되는데, 이를 방지하기 위해 두 번째 매개변수로 배열을 입력하면, 배열의 값이 변경되는 경우에만 함수 호출된다. 이 배열을 의존성 배열이라고 한다.
의존성 배열로 빈 배열을 입력하면 컴포넌트가 생성될 때만 부수 효과 함수가 호출되고, 컴포넌트가 사라질 때만 반환된 함수가 호출된다.
참고문서 : 실전 리액트 프로그래밍 [이재승 지음, 인사이트]