09.Context API

Updated:


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

  • props 대신 context 를 사용하면 하위 컴포넌트들이 props 없이도 부모의 값을 사용가능함
// in App.js

// 같은 값을 공유 하는 범위 생성
export let stockContext = React.createContext();

function App(){
  let [stock, stockEdit] = useState([10,11,12]);

  return (
  )
}
  • 같은 state 값을 공유하고 싶으면 context 부터 만들어야 함. createContext() 함수를 통해 변수를 만들면 됨

다음 단계로 state 값 공유를 원하는 컴포넌트들을 stockContext.Provider value={state 이름} 이렇게 공류할 state 를 넣어서 모든 HTML & component 는 재고 state 를 이용할 수 있습니다.

<stockContext.Provider value={stock}>

<Row>
  {
    shoes.map((a, i) => {
      return <Card shoes={shoes[i]} i={i} key={i} />
    })
  }
</Row>

</stockContext.Provider>
  • 다음은 context 를 받아서 다음과 같이 사용함

위에 코드를 사용하기 위해서 hook 을 하나 import 해주야함

import { useContext, useEffect, useState } from 'react';

그다음에 사용할 곳에 변수를 생성 함

  let stock = useContext(stockContext);

  { stock }

이런식으로 context 범위를 설정해서 데이터 전송을 할 수 있으나 절차가 좀 복잡하기 때문에 간단한 데이터 전송은 props 을 사용하는것이 좋다

  • 요약하자면

    1.React.createContext() 로 범위를 생성

    2.같은 값을 공유할 HTML 을 <범위>로 싸매기

    3.공유된 값 사용하기

위와 비슷한 방식으로 Redux 라는 라이브를 만힝 사용함 : 모든 컴포넌트파일들이 같은 값을 공유할 수 있는 저장 공간 생성 가능 + state 데이터 관리 기능

2.다른 하위 파일에서 context 공유 된 값 사용하기

  • 예시
// App.js

// Context 를 밖으로 내보내기 위해서 export 해줌
export let stockContext = React.createContext();

function App(){
  let [stock, editStock ] = useState([10,11,12]);

  return (
    <stockContext.Provider value={stock}>
      <Detail/>
    </stockContext.Provider>
  )
}
// in Detail.js

// export 된 Context를 import 해서 사용
import {stockContext} from './App.js';

function Detail(){
  let stock = useContext(stockContext);  

  return (
    <HTML 코드/>
  )
}

🔶 🔷 📌 🔑

Reference

Categories:

Updated:

Leave a comment