기존에는 컴포넌트의 Props를 통해 부모에서 자식으로 단방향으로 데이터가 전달됬다.

여러컴포넌트를 걸쳐 자주 사용되는 컴포넌트의 경우에는 기존 방식을 사용하면 코드가 너무 복잡해지고 사용하기에 불편함이 많았다.

그래서 나온 것이 Context이다.

리액트 컴포넌트 사이에서 기존의 프롭스를 통해 전달하는 방식 대신 컴포넌트 트리를 통해 곧바로 컴포넌트로 전달하는 새로운 방식을 제공한다.

이러한 방식을 통해 어떤 컴포넌트든지 데이터에 쉽게 접근할 수 있다.

props를 통해 데이터를 하위 컴포넌트로 전달하는 방식을 사용하는 그림인데 이 방식의 단점은

로그인이나 상태정보를 여러 곳에 전달할 때 하나하나 전부 전달해야 되서 코드가 더러워진다는 장점이 존재한다. 예시로 위 그림에서 root node에 있는 데이터를 C로 전달하려면 두번은 전달해야 된다.

이렇게 하위 컴포넌트로 계속 내려가야 한다.

이러한 점을 개선하기 위해 나온 개념이

이러한 방식이 Context이다.

이그림처럼 바로바로 데이터 전달이 가능하다.

데이터를 한 곳에서 관리해서 디버깅도 편리하다.

여러 개의 Component들이 접근해야 하는 데이터에는 어떤 것이 있을까?

보통 위와 같은 정보들을 필요로 한다.

예시로 웹사이트 상단에 위치한 네비게이션 바에 사용자의 로그인 여부에 따라 로그인 버튼과 로그아웃 버튼을 선택적으로 보여주고 싶은 경우 현재 로그인 상태 데이터에 접근할 필요가 있다.