Context란?
앞에서 props와 state로 데이터를 다루었다.
프로젝트의 규모가 커지면 이것만으로 다루기 힘들다.
이럴 떄 리액트에서는 Context라는 것을 사용한다.
다국어기능을 예로 들어보자.
리액트에서는 사용자가 값을 바꿀 수 있게 하려면 State를 사용했었다.
그러면 하위컴포넌트에 props를 여러번 내려줘야하는 상황이 발생한다.
언어값처럼 프로젝트 전체적으로 사용하는 데이터를
전역데이터(Global Data)라고 부른다.
전역데이터를 다룰 떄 props와 state만 사용하면
props를 여러번 여러곳에 내려주어야한다.
이 때 prop을 내려주는 것이 드릴로 땅을 파는 것 같다. 라고 해서
Prop Drilling이라고도 부른다.
Prop Drilling
드릴로 땅을 파듯이
상위 컴포넌트에서 하위 컴포넌트로 반복해서 Prop을 내려주는 상황
이런 문제를 해결하기 위해서 Context를 활용하면 된다.
Context를 활용하면 props를 거치지 않고
여러 컴포넌트에 데이터를 넘겨줄 수 있다.
Context(맥락)(상황에 대한 정보)다국어 기능을 예로 다시 보면
- 사용자가 한국어를 쓰는 상황
- 사용자가 영어를 쓰는 상황
이런 주변 상황에 대한 정보를
여러 컴포넌트들이 공유하면서 변역된 화면을 보여주기위해
Context라는 기능을 사용한다.
Context를 사용하려면 데이터를 공유할 범위를 정해야한다.
<Context.Provider />라는 컴포넌트로 범위를 정해줄 수 있다.
Provider의 자손 컴포넌트에서는 props를 거치지않고
데이터를 자유롭게 쓸 수 있다.
이런 식으로 prop drilling 문제를 해결하는 것이다.
Context
많은 컴포넌트에서 사용하는 데이터를
반복적인 prop전달없이 공유
