21화: Passing Data Deeply with Context

이 글은 단순히 리액트 공식 문서를 읽고 베꼈을 뿐이다!! 학습 목적이라면 공식 문서를 보는 걸 추천한다.

 

참새. Unsplash 에 Heye Jensen 님이 올림

공식 문서

https://react.dev/learn/passing-data-deeply-with-context

Passing Data Deeply with Context – React

props의 문제점

• props: UI 트리에서 정보를 명시적으로 전달하는 좋은 수단
• 트리 저 아래쪽 깊은 곳까지 props를 전달해야 하는 경우 불편함
• 여러 컴포넌트들이 같은 props를 필요로 하는 경우 불편함
• 상태 끌어올리기만으로 해결하기에는 prop drilling이 심할 수 있음

Context: props를 전달하는 또 다른 방법

• 부모 컴포넌트가 그 아래 트리 전체에 정보를 전달할 수 있음
• 자식 컴포넌트는 트리 상단 어딘가에 있는 그 데이터를 요청해서 사용할 수 있음

Context를 사용하는 세 단계

1. Context 만들기

• import { createContext } from 'react';
• export const BirdContext = createContext('참새');
• 초기값은 아무거나 가능함 (자바스크립트 객체도 가능)

2. Context 사용하기

• import { useContext } from 'react'
• 컴포넌트 내부에서 const bird = useContext(BirdContext); 로 값 받아오기
• useContext 훅은 리액트에게 컴포넌트가 이 context를 읽기를 원한다고 요청함

3. Context 제공하기

• 단순히 context를 쓴다고 해서 값을 받아오는 게 아님
• 누군가는 그 context를 제공해 줘야 함
• 부모 컴포넌트에서 자식들을 context provider로 감싸서 자식들에게 특정 정보를 가진 context를 제공해 줄 수 있음

<BirdContext.Provider value={myBirdName}>
  {children}
</BirdContext.Provider>

같은 컴포넌트에서 context를 사용하고 제공하기

• useContext를 이용해 값을 읽으면 본인의 가장 가까운 조상에서 값을 찾아옴
• 본인이 다시 context provider를 만들어서 자식들에게는 새로운 값을 가진 context 제공 가능

Context는 중간 컴포넌트들을 뛰어넘어 전달된다

• context를 제공하는 컴포넌트와 사용하는 컴포넌트 사이에 다른 컴포넌트들이 얼마나 있든 상관없음
• context는 컴포넌트들에게 본인이 있을 '문맥'을 제공하고 컴포넌트가 그 문맥에 맞게 본인을 바꾸도록 도와줌
• 서로 다른 context끼리는 덮어쓰지 않음

Context를 쓰기 전에

• 남용 주의
• props를 몇 단계 내려주기 싫다고 context를 무작정 쓰지 말 것
• 일단 props를 내려보고
• 좀 깊다 싶으면 컴포넌트의 chlidren prop을 이용해서 분리해봤는데도 잘 안 될 때 context 고려하기

Context의 사용 예

• 어플리케이션 테마 설정
• 현재 접속중인 계정 확인
• 라우팅에서 현재 페이지 확인
• 상태 관리