1. useEffect✨
01. useEffect란?
useEffect는 React 컴포넌트가 렌더링 된 이후마다 특정 작업을 수행하도록 설정하는 Hook이다. 즉, 컴포넌트가 생성되거나 제거될 때 특정 로직을 실행하고 싶다면 useEffect를 사용하면 된다.
외부 시스템과 컴포넌트를 동기화를 하기 위해 주로 사용한다. 외부 시스템을 단순히 연결하면 리렌더링될 때마다 재실행되므로 성능에 부담을 줄 수 있다. 그렇기 때문에 useEffect와 함께 사용하여, 리렌더링이 될 때마다 실행되지 않도록 한다.
*외부 시스템이란? : React에서 제어되지 않는 시스템을 뜻한다. 네트워크, 브라우저 DOM, 애니메이션, React가 아닌 코드, 브라우저 저장소 등
02. useEffect 사용법
컴포넌트의 최상위 레벨에서 useEffect를 호출하여 사용한다.
- 매개변수 - 콜백함수 : 화면에 컴포넌트가 렌더링 된 후 실행되는 로직
- 매개변수 2 - 의존성 배열 : 배열 안에서 특정 값(state, props 등)을 넣으면 해당 값이 변경될 때만
useEffect실행 - 반환 값 - clean up 함수 : 리렌더링 되는 순간, 또는 컴포넌트가 unmount 되는 순간 실행되는 로직. 즉, Effect가 다시 실행되기 전 이전 Effect를 마무리하는 단계
useEffect(() => {콜백함수}, [의존성 배열])
//예시
import { useEffect } from 'react';
const App = () => {
useEffect(() => {
//콜백함수 : 화면에 컴포넌트가 렌더링 된 이후 실행되는 로직
return () => {
//clean up 함수 :
}
},[의존성 배열])
... 이하 생략03. 의존성 배열
의존성 배열 (deps) 이란 useEffect의 실행 조건을 결정하는 역할, 즉 동작 트리거이다. 의존성 배열 안의 값이 업데이트가 될 때만 useEffect가 실행된다.
- 의존성 배열이 없는 경우
모든 변경사항을 감지하겠다는 뜻으로, 리렌더링 시 매번useEffect가 실행된다. - 의존성 배열이 빈 배열인 경우
상태 변화를 감지하지 않겠다는 뜻으로, 컴포넌트가 처음 생성될 때만 실행되고, 이후 state 변경(리렌더링)에는 실행되지 않는다. clean up 함수는 컴포넌트가 unmount 될 때 단 한 번만 실행이 된다.
04. clean up 함수
clean up 함수 란 state가 변경되거나 컴포넌트가 unmount 되었을 때 실행되는 함수이다. 이전 useEffect가 종료 되고 새로운 useEffect가 실행되기 전에 실행되는 로직이라고 생각하면 된다.
import { useEffect, useState } from 'react';
const App = () => {
const [count, setCount] = useState(0);
useEffect(() => {
console.log(`🟢 useEffect 실행: 현재 count 값은 ${count} 입니다.`);
return () => {
console.log(`🔴 clean up 실행: 이전 count 값은 ${count} 였습니다.`);
};
}, [count]); // count가 변경될 때만 실행
return (
<div>
<p>카운트: {count}</p>
<button onClick={() => setCount(count + 1)}>증가</button>
</div>
);
};
export default App;
export default App;- 컴포넌트 생성 :
useEffect가 호출되면서 콜백 함수의 로직이 실행된다.
// console창
🟢 useEffect 실행: 현재 count 값은 0 입니다.- 버튼 클릭 = count(state) 업데이트 : state 값이 변했기 때문에 리렌더링이 발생된다. 즉, 이전 useEffect의 clean up 함수가 실행된 후, 새로운 useEffect의 콜백 함수가 실행된다.
// console창
🔴 clean up 실행: 이전 count 값은 0 였습니다.
🟢 useEffect 실행: 현재 count 값은 1 입니다.- 컴포넌트 제거 : 마지막으로 clean up 함수가 실행된다.
// console창
🔴 clean up 실행: 이전 count 값은 1 였습니다.2. 컴포넌트의 라이프 사이클🐣
01. 컴포넌트의 라이프 사이클란?
모든 생명은 ' 탄생 ▶️ 성장 ▶️ 죽음 '이란 라이프 사이클을 갖고 있다. 컴포넌트도 마찬가지로, ' 마운트 Mount ▶️ 업데이트 Update ▶️ 언마운트 Unmount '란 라이프 사이클을 가지고 있다.
- 마운트 Mounting : 컴포넌트가 처음 생성됨, 화면에 나타남 (render)
- 업데이트 Updating : 상태(state)나 속성(props)가 변경되어 리렌더링됨
- 언마운트 Unmounting : 컴포넌트가 제거됨, 화면에 존재하지 않음
02. useEffect와 라이프 사이클
원래 생명주기 메소드는 클래스형 컴포넌트에서만 사용이 가능했다. 하지만 useEffect의 등장으로 함수형 컴포넌트에서도 비슷하게 사용할 수 있게 되었다.
- 컴포넌트 생성(Mount) :
useEffect의 콜백 함수 실행(return 부분 제외) - 의존성 배열 값 변경(Update) :
useEffect의 clean up 함수 실행 후 새로운useEffect실행 - 의존성 배열이 빈 배열일 경우 : 업데이트가 이뤄지지 않기 때문에 컴포넌트의 라이프 사이클과
useEffect의 라이프 사이클이 똑같아진다. 이 경우, clean up 함수 는 컴포넌트가 unmount될 때만 실행된다. - 컴포넌트 제거(Unmount) : 마지막으로 clean up 함수 실행
