React, Context API

Context API

Single Page Application의 단점으로 컴포넌트간 state 공유가 어려움

즉 컴포넌트에 state를 자식의 자식컴포넌트(자손컴포넌트)에서 사용하고 싶어지면 props를 2번 전송해 주어야함

 

이렇게 props를 여러번 걸쳐 전송해 주는 방법을 사용하고 싶지 않다면

Context API 문법을 쓰거나 Redux 같은 외부 라이브러리를 쓰면 됨

Context API문법을 사용하면 props  전송없이도 자손컴포넌트가 state 공유가 가능함

 

Context API 사용

1. creactContext() 함수를 가져와서 context를 한개 만듬

// App.js

export let Context1 = createContext();

context는 state 보관함

 

2. Context1으로 원하는 곳을 감싸고 공유를 원하는 state를 value 안에 다 적으면 됨

//App.js

let Context1 = createContext();

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

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

Context1으로 감싼 모든 컴포넌트와 그 자식컴포넌트는 state를 props 전송없이 직접 사용가능함

 

3. Context 안에 있던 state 사용

만들어둔 Context를 import 해오고 useContext() 안에 넣음

//Detail.js

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

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

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

useContext()는 Context 해체해주는 함수

그 자리에 공유했던 모든 state가 남고 변수에 담아서 쓰면 됨

 

심지어 Detail 안에 있는 모든 자식컴포넌트도 useContext() 쓰면 자유롭게 재고 state를 사용가능함

 

Context API 단점

실전에서는 Context API를 많이 쓰지는 않음

1. state 변경시 쓸데없는 컴포넌트까지 전부 재렌더링이 됨
2. useContext() 를 쓰고 있는 컴포넌트는 나중에 다른 파일에서 재사용할 때 Context를 import 하는게 불편

즉 성능이슈나 컴포넌트 재활용이 어려움

그래서 Context API 보다 redux 같은 외부라이브러리를 많이 사용