REACT Hooks 노트 useContext + Context API 정리

useContext

- 데이터를 가지고 있는 상위 컴포넌트가 하위 컴포넌트에게 데이터를 전달해줄 수 있다.

- 같은 데이터를 사용할때 컴포넌트마다 들고와서 사용하지 않아도 된다.

 

- C, E가 만약 data가 필요하다면? 단계별로 하나하나 거쳐서 데이터를 전달해줘야한다.

- A -> C \  B -> D -> E

- useContext를 사용하면 단계별로가 아닌 바로바로 데이터가 필요한 컴포넌트로 전달을 해준다.

 

props를 사용하면 되지 않냐고?

 

- props를 여러개 전달한다면..? 컴포넌트들마다 단계별로 2중, 3중 ... 등으로 props를 전달한다고 생각해보자

- 혹시모를 수정에 있어서도 벌써부터 머리가 아파진다.

- 내가 모르는 에러가 발생한다면? props를 사용한 컴포넌트들을 살펴보게 될것이다..

 

 

그럼 props를 사용하지말고 useContext만 사용해야겠다!?

nope!!! Context는 꼭 필요한 상황에서만 사용하자!!

* Context를 사용하면 컴포넌트를 재사용하기 어려워 질 수 있다.
* 리액트 공식문서에서도 볼 수 있듯이 Prop drilling을 피하기 위한 목적이라면
Componet Composition(컴포넌트 합성)이 더 간단한 해결책일 수도 있다고 명시한다.

 

합성 (Composition) vs 상속 (Inheritance) – React

 

---

예제 - 하위 컴포넌트로 값을 전달해야할때

props로 전달

 

- 이렇게 하나하나 props를 전달해주어야한다.

- 하위요소중에 필요하지 않은 Page에서도 props를 받아줘야하고 그 하위컴포넌트에도 props를 넘겨주어야하는 상황이 발생한다.

- 어떻게 보면 코드의 생산성에서도 불필요한 코드들이 발생한다고 볼 수 있다.

---

---

useContext로 전달

 

- props를 하나하나 전달해주지 않아도 된다.

- 필요하지 않은 컴포넌트에는 연결시켜주지 않아도 되며, 불필요한 코드도 사라진다.

 

 

---

사용 방법

import { createContext } from "react"

export const ThemeContext = createContext(null)

- createContext() 훅을 사용하여 (null)을 사용하거나 기본값을 사용할 수 있다.

 

 <ThemeContext.Provider value={{ 넘겨줄 값, 넘겨줄 값 }}>
 	<Page />
 </ThemeContext.Provider>

- .Provider를 통해서 사용할 상위 컴포넌트를 감싸준다.

- value에는 넘겨줄 값을 넣어주면 된다.

 

* 여기서 만약 createContext("hello")처럼 hello 문자열을 넘겨주고

   <.Provider></.Provider>로 감싸주지 않았다면, 초기값인 hello를 하위 컴포넌트에서 사용할 수 있다.

* 다른 createContext()를 만들었다면 상위 컴포넌트로 <.Provider></.Provider>를 감싸주어 사용하면 된다.

 

 

const { 넘겨준 값 } = useContext(ThemeContext)

- 이제 사용할 컴포넌트에서 useContext()를 통해서 value를 받아서 사용할 수 있다.

 

 

 

 

---

리액트 공식문서와 별코딩님의 영상을 보면서 오늘도 리액트 훅에 취한다..

리액트 훅... 생각보다 너무 많은거 같은데..? 리액트 라우터도 공부중인데 간단한 작업 외에도 여러가지 훅들이 있는걸보았다..

다음주는 1일 1리액트 블로그를 목표로 다시 달려봐야겠다!!!