useEffect - 컴포넌트 생명주기 이해
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. useEffect에 빈 배열([])을 의존성으로 전달하면 언제 실행되나요?
💡 빈 배열([])을 의존성으로 전달하면 컴포넌트가 처음 DOM에 추가될 때(마운트) 딱 1번만 실행됩니다. 클래스 컴포넌트의 componentDidMount와 동일합니다.
Q2. useEffect의 클린업(cleanup) 함수는 언제 실행되나요?
💡 클린업 함수는 두 경우에 실행됩니다: (1) 컴포넌트가 언마운트될 때, (2) 의존성이 변경되어 다음 effect가 실행되기 직전. 이를 통해 이전 effect의 부수효과를 정리합니다.
Q3. useEffect 내에서 비동기 작업을 처리하는 올바른 방법은?
💡 useEffect의 콜백 함수는 async가 될 수 없습니다(Promise를 반환하면 클린업으로 인식). 대신 내부에 async 함수를 선언하고 즉시 호출하는 패턴을 사용합니다.
Q4. setInterval을 useEffect로 설정할 때 메모리 누수를 방지하는 방법은?
💡 setInterval은 clearInterval로 반드시 정리해야 합니다. useEffect의 클린업 함수에서 return () => clearInterval(id)를 작성해 컴포넌트 언마운트 시 타이머를 해제합니다.
Q5. 다음 코드의 문제점은? useEffect(() => { setCount(count + 1); }, [count]);
💡 count에 의존하면서 effect 내에서 count를 변경하면 무한 루프가 발생합니다: count 변경 → effect 실행 → count 변경 → ... 이 경우 setCount(prev => prev + 1)과 의존성 배열 정리로 해결합니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.