React Context를 전역 상태처럼 남용하면 어떤 문제가 생기나요?

Context는 깊은 props 전달을 줄이는 데 유용하지만 자주 바뀌는 큰 상태를 넣으면 많은 하위 컴포넌트가 다시 렌더링될 수 있습니다. 상태를 관심사별로 나누고, 자주 변하는 값은 외부 상태 관리나 selector 기반 구독을 고려하는 것이 좋습니다.

핵심 개념

핵심 기준은 편리한 전달 수단이지만 변경 범위 관리 필요입니다. 이 개념은 단순히 용어를 외우는 것보다, 어떤 문제를 줄이기 위해 등장했는지와 실제 코드나 운영 환경에서 어떤 trade-off를 만드는지 함께 이해하는 것이 중요합니다.

Context 값이 바뀔 때 하위 소비자들이 다시 렌더링되는 범위를 생각해보세요.

동작 흐름

1. 먼저 문제가 발생하는 조건과 입력을 확인합니다.
2. 관련된 런타임, 브라우저, 서버, 데이터 저장소의 책임을 나눠 봅니다.
3. 가장 작은 범위에서 안전한 해결책을 적용합니다.
4. 로그, 테스트, 모니터링으로 실제로 문제가 줄었는지 확인합니다.

실제 예시

거대한 appState 객체를 하나의 Context로 제공하면 작은 필드 하나가 바뀌어도 여러 컴포넌트가 영향을 받을 수 있습니다.

실무에서 적용하는 방법

테마나 인증 사용자처럼 변경 빈도가 낮은 값에 적합하고, 고빈도 데이터는 분리합니다.

실무에서 주의할 점

• Provider value를 매 렌더 새 객체로 만들면 불필요한 업데이트가 생길 수 있습니다.
• 개념을 적용하기 전에 현재 시스템의 규모, 병목, 장애 영향도를 함께 확인해야 합니다.
• 팀 규칙이나 프레임워크 기본 동작과 충돌하지 않는지도 점검하는 것이 좋습니다.

함께 연결해서 보면 좋은 키워드

React, Context, 상태관리, 렌더링

면접에서 짚으면 좋은 포인트

• 정의만 말하기보다 어떤 문제를 줄이기 위한 개념인지 먼저 설명하면 좋습니다.
• 장점과 함께 비용, 한계, 적용하지 않아도 되는 상황을 같이 말하면 실무 이해도가 드러납니다.

정리

한 줄로 정리하면, Context는 깊은 props 전달을 줄이는 데 유용하지만 자주 바뀌는 큰 상태를 넣으면 많은 하위 컴포넌트가 다시 렌더링될 수 있습니다입니다. 실무에서는 개념을 적용하는 조건과 적용하지 않았을 때 생기는 문제까지 함께 이해하는 것이 중요합니다.