[React] Context API

Single Page Application 단점

- 컴포넌트간 state 공유가 어려움 (부모 컴포넌트 -> 자식 컴포넌트로 props 전송은 가능)

* 현재 진행중인 react-shop 플젝 구조도  <TabContent> ⊂ <Detail> ⊂ <App>

** props 전송하려면 App에서 Detail로 넘긴 후 Detail에서 TabContent로 넘겨야함

 

props를 사용하기 싫으면?

• Context API 사용 (리액트 기본문법)
  - 성능 이슈, 컴포넌트 재활용 어려움 때문에 상대적으로 적게 사용
• Redux 사용 (외부라이브러리)

 

---

Context API 사용 방법

1. context를 하나 생성(= context란 state 보관함을 하나 만드는 것)
2. <Context>로 원하는 컴포넌트 감싸기
3. <Context value= { {넘길 값1, 넘길 값2 넣기} }
4. 2번에 export 붙이기
5. 값을 사용할 파일에 Context를 import
6. useContext(Context) 사용하여 보관함 해제
7. 사용할 곳에 Context 변수명 쓰기

- App.js

import { createContext, useState } from 'react';
...

export let Context1 = createContext() // Context API 사용 세팅 1. context란 state 보관함을 하나 만들어줌

function App() {
  let [stock] = useState([10, 11, 12]) // 재고
    
  return (
    <div className="App">
    ...
    <Route path="/detail/:id" element={ 
      <Context1.Provider value={ {stock, shoes} }> {/* Context API 사용 세팅 2. <Context>로 원하는 컴포넌트 감싸기 */}
        <Detail shoes={shoes}/> {/* Context API 사용 세팅 3. value={ {넘길 값1 넣기, 넘길 값2 넣기} } */}
      </Context1.Provider>
    }/>
    </div>
  );
}
export default App;

- detail.js

...
import {Context1} from './../App.js' // Context API 사용 1. App.js에서 Context를 export, 사용할 파일에 Context를 import

function Detail(props){
  let {stock} = useContext(Context1) // Context API 사용 2. useContext(Context) - 사용시 보관함 해체
  ...
  return (
    <div className="container">
      { stock } {/* Context API 사용 3. 사용할 Context 변수명 쓰기 */}
      <TabContent2 tab={tab}/>
    </div>
  )
  function TabContent2({tab}){
    let {stock} = useContext(Context1) // Context API 사용 4. 자식 컴포넌트에서도 props 없이 사용 가능
    
    return (
      <div className="start">
        { [ <div>{stock}</div>, <div>내용1</div>, <div>내용2</div> ][tab] }
      </div>
    )
  }
}
export default Detail;

 

Context API 단점

  1. state 변경시 필요없는 것까지 재렌더링

/* App.js*/
function App() {
  let [stock] = useState([10, 11, 12]) // 값이 바뀌면
  ...
  return (
  ...
    <Context1.Provider value={ {stock, shoes} }> // Context 태그 부분이 재렌더링 되면서
      <Detail shoes={shoes}/> // 그안에 든 태그가 값이 바뀌는 stock이 없어도 같이 재렌더링됨
    </Context1.Provider>
    ...

 

  2. 자식 컴포넌트가 Context 문법을 사용하고 있으면 이 컴포넌트를 다른 페이지에서 import해서 재사용하기 어려움

    - 변수가 없다고 나온다던지...