Context + use() 예제

← use() Hook 예제로 돌아가기

🎯 핵심 포인트

• use(Context)로 조건부 Context 읽기 가능
• 기존 Hook 규칙의 예외: 조건문, 루프 내부에서도 사용 가능
• Context가 null인 경우 자동으로 에러 발생 (더 안전함)
• 성능 최적화: 필요할 때만 Context를 구독

컨트롤

🔄 기존 방식 (useContext)

테마: light

폰트 크기: medium

언어: ko

알림: 켜짐

✨ 새로운 방식 (use Hook)

테마: light

고급 설정이 숨겨져 있습니다

💡 코드 비교

기존 방식 (useContext)

function Component() {
    // 항상 호출되어야 함
    const ctx1 = useContext(Ctx1);
    const ctx2 = useContext(Ctx2);
    
    if (condition) {
        // ctx2 사용
    }
    // ctx2를 안 써도 항상 구독됨
}

새로운 방식 (use)

function Component() {
    const ctx1 = use(Ctx1);
    
    if (condition) {
        // 조건부로 호출 가능! ✨
        const ctx2 = use(Ctx2);
    }
    // 필요할 때만 구독
}