![[React] 31. Context](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2026-03-07T09%3A56%3A44.074Z-f636bb6c-0ef5-424a-9b05-1ce37b476084&w=3840&q=75)
1. Context란
컴포넌트간의 데이터를 전달하는 또 다른 방법
기존의 props가 가지고 있던 단점을 해결할 수 있다
2. Props의 단점
props는 부모 → 자식 으로만 데이터를 전달할 수 있다.
그래서 컴포넌트의 계층 구조가 아래 이미지와 같다면
데이터를 전달할 때 중간에 껴있는 컴포넌트를 무시하고
다이렉트로 데이터를 전달할 수 없고,
중간에 껴있는 컴포넌트도 거쳐야한다.
기존에 만들어 두었던 투두리스트 앱도 다음과 같이
중간다리 역할을 하는 컴포넌트가 껴있어 데이터 이동이
다이렉트로 되지 않았다.
이러한 현상을 props가 땅을 파고 내려가는 모습과 같아
Props Drilling이라 부르는데 프로젝트의 규모가 커질 수록
코드가 많아짐은 물론 복잡해지며 유지보수가 어려워진다.
이러한 단점을 보완하는 것이 다이렉트로 데이터 이동을
도와주는 React Context이다.
Context는 일종의 데이터 보관소 역할을 하는 객체이다.
새롭게 Context를 만들고 그 안에 전달되는 데이터를 보관하여
이 데이터가 필요한 컴포넌트에 직접적으로 공급해줄 수 있다.
플러터의 리버팟과 상당히 유사해보인다!
Share article