처음 만난 리액트 문서
14.1 Context란 무엇인가?
기존의 일반적인 리액트 애플리케이션에서는 데이터가 컴포넌트의 props를 통해서 부모에서 자식으로 단방향으로 전달되었습니다. 하지만 여러 컴포넌트에 걸쳐 굉장히 자주 사용되는 데이터의 경우에는 기존의 방식을 사용하면 코드도 너무 복잡해지고 사용하기에 불편함이 많았습니다. 그런 과정에서 나오게 된 것이 바로 Context입니다.
Context는 리액트 컴포넌트들 사이에서 데이터를 기존의 props를 통해 전달하는 방식 대신 Component Tree를 통해 곧바로 컴포넌트로 전달하는 새로운 방식을 제공합니다. 이를 통해 어떤 컴포넌트든지 데이터에 쉽게 접근할 수 있습니다. 아래 그림을 한 번 보도록 하겠습니다.
먼저 위 그림은 props를 통해서 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 일반적인 방식입니다. 우리가 지금까지 실습하면서 사용한 방식이죠. 이 방식의 단점은 여러 컴포넌트에 걸쳐서 자주 사용되는 데이터(예: 로그인 여부, 프로필 정보 등)를 전달하려면 반복적인 코드가 많이 생기고 지저분해진다는 것입니다. 예를 들어, 위 그림에서 Root 노드에 있는 데이터를 C컴포넌트로 전달하려면 최소 2번을 props로 전달해야 합니다. 만약 데이터를 전달하려는 컴포넌트가 10단계 하단에 있다면, 10번이나 props를 타고 하위 컴포넌트로 내려가야 합니다. 그래서 이러한 불편한 점을 개선하기 위해서 생겨난 것이 바로 Context입니다. 아래 그림은 위와 동일한 기능을 구현하기 위해 Context를 사용한 것입니다.
Context를 사용하면 일일이 props로 전달할 필요없이, 위 그림처럼 데이터를 필요로 하는 컴포넌트에 곧바로 데이터를 전달할 수 있습니다. 그래서 코드도 깔끔해지고 데이터를 한 곳에서 관리하기 때문에 디버깅을 하기에도 굉장히 유리합니다.
마지막 업데이트: 2025년 08월 21일 09시 05분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page