Context

같은 값이 헤더, 사이드바, 본문 깊은 곳까지 필요할 때마다 props를 손으로 내려 보내면 중간 컴포넌트가 단순 전달 역할만 하게 됩니다. 이 props drilling이 길어질수록 구조 변경 비용이 커지고, 실제로 값이 필요한 곳과 값이 지나가는 곳이 뒤섞입니다.

컴포넌트 기반 설계가 자리 잡자 재사용성은 좋아졌지만, 공통 상태를 깊은 트리로 전파하는 비용이 새로운 문제로 떠올랐습니다. React는 모든 공유값을 전역 변수로 풀어 버리기보다, 필요한 서브트리에만 명시적으로 공급하는 Context 모델로 이 문제를 다뤘습니다.

Provider가 특정 값을 트리 아래에 공급하면, 그 내부 어디에서든 해당 Context를 읽는 컴포넌트가 현재 값을 참조할 수 있습니다. 값이 바뀌면 그 Context를 읽는 컴포넌트들이 새 값으로 다시 렌더링됩니다. 따라서 Context는 단순한 편의 기능이 아니라 렌더 범위에도 영향을 주는 데이터 전달 구조입니다.

Context와 props는 둘 다 값을 전달하지만 경로가 다릅니다. Props는 부모-자식 경로가 코드에 명확히 드러나고, Context는 중간 전달 단계를 건너뛰고 필요한 곳에서 직접 읽게 합니다. 그래서 전달 경로를 숨기는 만큼, 정말 공통값인지 먼저 따져 보는 것이 중요합니다.

실무에서는 테마, 인증 정보, 현재 조직, 폼 컨트롤러처럼 넓은 구간에서 함께 읽는 값을 Context에 두는 경우가 많습니다. 반대로 단지 두세 단계만 내려가면 되는 값까지 모두 Context로 올리면, 데이터 흐름이 지나치게 숨겨지고 재렌더 범위도 넓어질 수 있습니다.