Context API

 

App 에 있던 state 를 손자 컴포넌트에서 사용하고 싶다면 어떻게 할까?

 

props 를 하위로 2번 전송해주어야한다. 

 

하지만 이런 과정은 귀찮기 때문에 Context API 문법이나 Redux 같은 외부 라이브러리를 사용한다. 

 

 

 

 

 

Context API 문법으로 props 없이 state 공유하기 

 

재고라는 state 를 App 컴포넌트에 만들고 

이 state 를 TabContent 라는 자식컴포넌트에서 쓰고 싶을 때

 

Context API 문법을 사용하면 props 전송 없이도 손자 컴포넌트에서 사용할 수 있다. 

 

 

 

(App.js)

export let Context1 = React.createContext();

function App(){
	let [재고, 재고변경] = useState([10, 11, 12]);
	...
}

 

일단 createContext() 함수를 가져와 context 하나를 만들어준다. 

 

context 는 일종의 state 보관함.

 

 

 

(App.js)

export let 재고context = React.createContext();

function App(){
  let [재고, 재고변경] = useState([10,11,12]);

  return (
    <Context1.Provider value={ {재고, shoes} }>
      <Detail shoes={shoes}/>
    </Context1.Provider>
    
  )
}

Context1 로 원하는 컴포넌트를 감싸주고, 공유하려는 state를 value 안에 다 적어주면 된다. 

 

그러면 Context1 로 감싼 모든 컴포넌트와 그 자식컴포넌트는 state 를 props 전송 없이 사용할 수 있다. 

 

 

 

 

 

 

Context 안에 있던 state 사용하기

 

1. 만든 Context 를 import 한다. 

2. useContext() 안에 넣는다. 

 

그러면 그 자리에 공유했던 state 를 모두 사용할 수 있다. 

 

 

(Detail.js)

import {useState, useEffect, useContext} from 'react';
import {Context1} from './../App.js';

function Detail(){
  let {재고} = useContext(Context1)

  return (
    <div>{재고}</div>
  )
}

 

Detail 컴포넌트에서 Context 에 있던 state 를 꺼내 쓰려면

 

1. Context1 을 import 하고

2. useContext() 안에 담으면 된다. (Context 해체하는 함수라고 생각)

 

그러면 그 자리에 공유한 모든 state 가 남는다. 

 

변수에 담아서 사용

 

 

 

 

 

Context API 문법 단점

 

1. state 변경 시 쓸데없는 컴포넌트까지 전부 재렌더링 된다. 

2. useContext() 를 사용하는 컴포넌트는 나중에 다른 파일에서 재사용할 때 Context 를 import 하는 게 귀찮아질 수 있다. 

 

 

따라서 Redux 같은 외부 라이브러리를 많이 사용함.