[React] Context - 컴포넌트 간 데이터 전달 활용법

이번 글은 컴포넌트 간 데이터를 전달할 때 사용되는 context에 대한 설명글이다.

 

---

 

[ Context란? ]

데이터를 부모에서 자식으로만 전달할 수 있는 props를 대체하여 데이터를 전달할 수 있는 것이다.

(props에 대한 설명은 블로그 하단 링크 참고)

 

데이터를 보관하는 객체라고 생각하면 된다.

 

만약 props로 데이터를 전달한다면 App에서 child2까지 데이터를 전달하기까지 child1을 걸쳐야 데이터가 전달가능하다.

하지만 이렇게 걸쳐지는 과정이 많아질 경우 중복되는 데이터가 과하게 발생하거나 이름 수정 시 번거로워지는데 이를 Props Drilling(프롭스 드릴링)이라고 하게된다.

 

하지만 context를 사용하면 App에서 child2로 바로 데이터 전달이 가능해진다.

 

아래 이미지와 같이 App 컴포넌트의 데이터를 context에 보관한 후 해당 데이터를 child2에 전달해줄 수 있다.

---

 

[ Context 사용법 - (1) 데이터 내보내기 ]

1) createContext를 임포트해준다.

import { createContext } from "react";

 

 

2-1) 하위 컴포넌트에 공급할 데이터를 저장할 새로운 context를 생성해준다.

※ 이때 context 선언은 컴포넌트 외부에 해줘야한다. (내부에 해주면 정보를 한번만 공급해주면 되는 context의 기능이 불필요하게 업데이트되어야하기 때문 )

=> 외부에서 데이터를 꺼내 사용하기 위해 export로 내보내줘야함

export const DiaryStateContext = createContext();

 

2-2) 생성한 context를 콘솔창에 출력해보면 아래 사진과 같이 provider가 뜨게 된다.

이 부분이 context가 공급할 데이터와 데이터를 공급할 컴포넌트를 설정하기 위해 사용되는 props이고 이것은 컴포넌트이다.

 

=> 따라서 아래 코드와 같이 작성하여 렌더링해줄 수 있다. (컴포넌트 내부에서 사용)

<DiaryStateContext.Provider/>

 

 

3) 위의 렌더링 방식으로 데이터를 공급해주고 싶은 컴포넌트를 아래 코드와 같이 감싸준다.

=> 그럼 이제 Home 컴포넌트와 New 컴포넌트는 DiaryStateContext를 공급받을 수 있게 된다.

 

4) 데이터를 공급하는 방법은 아래 value={data}와 같이 작성해주면 된다.

=> 그럼 DiaryStateContext는 data를 객체로 전달하게 된다.

<DiaryStateContext.Provider value={data}>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/new" element={<New />} />
          </Routes>
</DiaryStateContext.Provider>

 

 

---

 

[ Context 사용법 - (2) 데이터 꺼내기 ]

1) 아래 코드와 같이 useContext와 DiaryStateContext(생성한 Context)를 임포트해준다.

import { useContext } from "react";
import { DiaryStateContext } from "../App";

 

2) 불러온 DiaryStateContext를 useContext의 인수로 불러온다.

=> useContext : 인수로 공급한 DiaryStateContext의 데이터를 반환하는 함수

(여러 데이터를 받아왔을 경우 구조분해할당을 통해 원하는 데이터만 공급받을 수 있다.)

const data = useContext(DiaryStateContext);

 

 

---

 

[ 참고하면 좋은 블로그 글 ]

* props에 대한 글은 아래 링크에 자세히 나와있다.

https://hwangseoyoung.tistory.com/204

[React] props 전달하기

https://hwangseoyoung.tistory.com/207

[React] props와 state의 상호작용

 

 

---