2025 React Master Class - 6강: useEffect란 무엇인가? 1️⃣
useEffect는 리액트 컴포넌트 렌더링 시 특정 작업을 수행하도록 설정하는 훅으로, useState와 함께 컴포넌트 동작 제어의 핵심입니다. 🔄
useEffect에 의존성 배열을 제공하지 않으면, 컴포넌트가 최초 렌더링될 때와 상태값 변경으로 인한 재렌더링 시마다 콜백 함수가 실행됩니다. 🚀
- 컴포넌트가 브라우저에 처음 마운트될 때 단 한 번만 작업을 수행하려면,
useEffect의 두 번째 인자로 빈 배열([])을 전달합니다. 🏞️
- 특정 상태값이나 프롭스(props) 등 특정 값이 변경될 때만
useEffect 콜백을 실행하려면, 두 번째 인자로 해당 값들을 배열 안에 넣어 의존성을 지정합니다. 🎯
useState 상태값의 변화는 컴포넌트의 재렌더링을 유발하며, 이는 useEffect의 실행 조건에 직접적인 영향을 미칩니다. 💡
- 개발 환경의
StrictMode로 인해 useEffect가 두 번 실행될 수 있으나, 이는 디버깅 목적이며 실제 프로덕션에서는 한 번만 실행됩니다. 🛠️
데브허브 | DEVHUB | 2025 React Master Class - 6강: useEffect란 무엇인가? 1️⃣