리액트 Context API 사용하기

만약에 컴포넌트끼리 props를 공유하고싶다거나, 중첩된 컴포넌트가 많다면 어떻게 해야할까 ?

App에 있는 state를 저 안쪽에 있는 컴포넌트로 보내고 싶다면?

이럴때 사용하는것이 Context API이다.

🔍 Context API 사용하기

🔍 1. CreateContext() 호출하기

import { createContext } from "react";

export let Context1 = createContext();

function App () {....

let [stock] = useState([10, 11, 12]);

여기서 createContext() 는 컨텍스트를 생성해주는 것인데, 리액트에서 컨텍스트는 state 보관함이라고 생각하면 편하다.

그리고 나중에 다른 컴포넌트에서 저 Context 를 사용해줄 것이니 저 Context1 을 export 를 해놓는다.

🔍 2. Context.Provider 로 원하는 컴포넌트 감싸고 공유할 state를 value 값으로 적어주기

function App() {
  let [product, setProduct] = useState(data);
  let [stock] = useState([10, 11, 12]);
  
  
  ....
  
<Context1.Provider value={{stock, product}}>
<Detail product={product} />
</Context1.Provider>

이런식으로 작성하면 stock 과 product state를 저 Detail 컴포넌트 안에서 사용할수 있게 된다.

🔍 3. 사용할 컴포넌트 안에서 Context import 하고 useContext(Context) 호출

import {Context1} from './../App.js'

function Detail(props) {
  
let {stock} = useContext(Context1);
...

저 useContext()는 state 보관함을 해체해주는 함수라고 생각하면 된다.

아까 2에서 value로 적어주었던 state 들을 가져와서 사용하면 된다.

function Detail(props) {
  
  ....
  
{stock}

아까 App.js 에서 적어줬던 stock state 값들이 나오는걸 볼 수 있다.

function TabContent ({tab}){

let {stock} =  useContext(Context1);
  
  
...

Detail 컴포넌트 안에 있는 TabContent 컴포넌트 안에서도 useContext()를 사용해서 자유롭게 state를 사용할 수 있다.

🔍 Context API 단점

1. state 변경시 컴포넌트 내에서 그 state를 안쓰는 부분까지 재렌더링이 되기때문에 사이트의 규모가 크다고 가정했을때 성능 이슈가 생길 가능성이 있고 비효율적이다.
2. useContext()를 사용하는 컴포넌트를 다른 파일에서 재사용한다고 가정했을때, 다시 import 해야하는 등 번거로운 문제들이 생길 수 있다.

이러한 문제들로 인하여 state들을 다른 컴포넌트와 공유하기 위해서는 redux 같은 외부 라이브러리들을 많이 사용한다.