[리액트] Context

props를 거치지 않고 

언어값처럼 프로젝트에서 전체적으로 

 

0. props drilling?

Prop Drilling은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정이다.
prop drilling이 보통 3~5개 컴포넌트를 거치는 정도이면, 괜찮을 수 있으나, 10개 이상을 거친다면 중간 컴포넌트들은 불필요하게 prop을 받게 되어 가독성이 떨어져 유지보수가 어려워진다.

이를 해결하기 위해 전역 상태관리 라이브러리를 사용할 수 있으며, 간단하게는 context api를 사용할 수 있다.

 

1. context란?

리액트에서 context를 쓰는 이유는 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공하기 위함이다.

context는 전역적(global)으로 데이터(현재 로그인한 유저, 테마, 선호 언어 등)를 공유할 수 있는 방법이다.

 

 

 

 

 참조:

https://velog.io/@jangws/React-Context%EA%B0%80-%EA%BC%AD-%ED%95%84%EC%9A%94%ED%95%A0%EA%B9%8C-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%ED%95%A9%EC%84%B1%EC%9C%BC%EB%A1%9C-props-drilling%EC%9D%84-%EA%B7%B9%EB%B3%B5%ED%95%B4%EB%B3%B4%EC%9E%90

[React] Context가 꼭 필요할까? 컴포넌트 합성으로 props drilling을 극복해보자