Udemy React 강의 170번 정리
이번 강의에서는 Context 값을 사용하는 컴포넌트가 언제, 왜 다시 실행(리렌더링)되는지를 다뤘다.
핵심은 생각보다 단순하다. useContext로 Context 값을 사용하는 컴포넌트는 그 Context 값이 변경되면 자동으로 다시 실행된다.
React 컴포넌트는 언제 다시 실행될까?
컴포넌트 함수는 다음 세 가지 경우에 다시 실행된다.
1. 자기 자신의 state가 변경될 때
2. 부모 컴포넌트가 다시 실행될 때
3. 사용 중인 Context 값이 변경될 때 (이번 강의의 핵심)
Context를 "사용한다"는 게 무슨 뜻일까?
function Cart() {
const cartCtx = useContext(CartContext);
return <p>{cartCtx.items.length}</p>;
}이 코드를 작성하는 순간, Cart 컴포넌트는 CartContext의 값(items)에 의존하게 된다.
즉, 이 컴포넌트는 CartContext 값이 바뀌면 다시 실행되어야 한다고 React는 이해한다.
Context 값이 바뀌면 실제로 무슨 일이 일어날까?
예를 들어 App 컴포넌트에서
setShoppingCart(prev => ({
items: [...prev.items, newItem],
}));이 코드가 실행되면 다음 순서로 일이 벌어진다.
1. shoppingCart state 변경
2. CartContext.Provider의 value 변경
3. Context 값이 변경됨
4. 이 Context를 사용하는 모든 컴포넌트가 다시 실행됨
이렇게 보면 state와 Context는 리렌더링 관점에서 비슷하게 느껴지는데..
강의에서 강조하는 중요한 포인트는 이거다.
- state가 변경되면 컴포넌트가 다시 실행되듯이 Context 값이 변경되어도 컴포넌트는 다시 실행된다.
하지만 Context 값이 바뀌면 앱 전체가 다 리렌더링되는 건 아니다.
해당 Context를 실제로 사용하는 컴포넌트만 다시 실행된다.
Context를 사용하지 않는 컴포넌트는 영향을 받지 않는다.
