커스텀 훅 만들기 - 로직 재사용
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. 커스텀 훅으로 인정받기 위한 필수 조건은?
💡 커스텀 훅의 유일한 필수 조건은 함수 이름이 'use'로 시작하는 것입니다. React는 이 네이밍 규칙으로 훅 규칙을 적용하고, ESLint가 훅 관련 규칙을 검사합니다. useState 사용이나 반환값은 필수가 아닙니다.
Q2. 커스텀 훅에 대한 설명으로 올바른 것은?
💡 커스텀 훅을 여러 컴포넌트에서 호출하더라도 각 컴포넌트는 독립적인 상태를 가집니다. 커스텀 훅은 로직을 공유하지만 상태는 공유하지 않습니다. 상태를 공유하려면 Context나 상태 관리 라이브러리를 사용해야 합니다.
Q3. useLocalStorage 훅의 초기값 처리에서 useState의 초기화 함수를 사용하는 이유는?
💡 useState의 초기화 함수(lazy initialization)는 컴포넌트가 처음 렌더링될 때 딱 1번만 실행됩니다. useState(localStorage.getItem(key))는 매 렌더링마다 localStorage를 읽지만, useState(() => localStorage.getItem(key))는 최초 1회만 읽습니다.
Q4. useFetch 훅에서 url이 변경될 때마다 새로운 데이터를 가져오려면 어떻게 해야 하나요?
💡 useEffect의 의존성 배열에 url을 추가하면 url이 변경될 때마다 effect가 재실행됩니다. useEffect(() => { fetch(url)... }, [url]) 패턴으로 동적 패칭을 구현합니다.
Q5. 커스텀 훅 사용의 주요 장점이 아닌 것은?
💡 커스텀 훅은 로직을 재사용하지만 각 컴포넌트의 상태는 독립적입니다. 컴포넌트 간 실시간 상태 동기화를 위해서는 Context API, Redux, Zustand 같은 전역 상태 관리 도구를 사용해야 합니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.