Context API - 전역 상태 관리 입문
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. Props Drilling이란 무엇인가요?
💡 Props Drilling은 트리 깊은 곳에 있는 컴포넌트에 데이터를 전달하기 위해 중간 컴포넌트들이 사용하지도 않는 props를 계속 전달해야 하는 문제입니다. Context API가 이 문제를 해결합니다.
Q2. React에서 새로운 Context 객체를 만들 때 사용하는 함수는?
💡 createContext() 함수로 Context 객체를 생성합니다. 인자로 기본값을 넘길 수 있으며, Provider가 없는 트리에서 useContext 호출 시 사용됩니다.
Q3. 다음 코드의 주요 성능 문제점은? <ThemeContext.Provider value={{ theme, setTheme }}>
💡 렌더링마다 새로운 객체가 생성되어 Context를 구독하는 모든 컴포넌트가 리렌더링됩니다. useMemo로 contextValue를 메모이제이션하는 것이 권장됩니다.
Q4. useContext(MyContext)의 반환값은 무엇인가요?
💡 useContext(MyContext)는 컴포넌트 트리에서 가장 가까운 MyContext.Provider의 value prop 값을 반환합니다. Provider가 없으면 createContext()의 기본값을 반환합니다.
Q5. Context API의 적합한 사용 사례가 아닌 것은?
💡 Context는 상태가 변경될 때 구독 컴포넌트 전체가 리렌더링됩니다. 매 초 업데이트되는 실시간 데이터에 Context를 쓰면 성능 문제가 생깁니다. 자주 바뀌는 데이터는 별도 로컬 상태나 특수 라이브러리를 사용하는 것이 좋습니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.