[React] 코딩애플 blog-part3-1 (Context API)

지난 시간 컴포넌트 안의 컴포넌트 이렇게 중첩이 되어있으면 매우 복잡해진다. 따라서 조금 더 쉽게 구현할 수 있는 Context API문법을 이용할 것이다.

 

Context API ?

리액트 내장 문법으로 모든 하위 컴포넌트들이 props 없이도 state(부모 값을) 사용가능하게 만들어주는 문법

 

Context 문법을 이용해 props없이 state 전송하기

App() 컴포넌트 밖에다가 코딩

(App.js)

let 재고context = React.createContext();

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

  return (
    <HTML많은곳/>
  )
}

1. createContext()라는 함수를 이용해 변수 생성. 변수는 바로 특별한 <컴포넌트>가 된다!

 

(App.js)

let 재고context = React.createContext();

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

  return (
    <HTML많은곳/>
    <재고context.Provider value={재고}>
      <카드레이아웃3개생성하는부분/>
    </재고context.Provider>
    
  )
}

2. 아까만든 특별한 컴포넌트로 state 값 공유를 원하는 컴포넌트들을 Provider 을 이용하여 <범위></범위>로 전부 감싼다. value={state이름} 이렇게 공유할 state를 집어넣는다.

 

그럼 이제 <범위></범위> 안에 있는 모든 HTML & 컴포넌트는 재고 state를 이용가능!!

복잡한 props 전송없이 사용가능

(App.js)

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

function Card(){
  let 재고 = useContext(재고context);

  return (
    <HTML많은곳/>
    <div>{재고[0]}</div>
  )
}

3. state를 사용하고 싶으면 useContext() 라는 훅을 이용해서 사용을 원하는 context를 불러와야 한다. 그러면 props없이 재고를 사용할 수 있다.

• ) useContext 훅을 쓰려면 상단에 'react' 로부터 import하기!

하지만 이런 방법은 props보다 불편하다. 따라서 중첩 컴포넌트기 많을때 사용하는 문법이고 간단할때는 그냥 props를 쓰는 것이 좋다.

 

하위컴포넌트를 만들어서 다시한번 복습

구조는 다음과 같다.

(App.js)

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

function Card(){
  let 재고 = useContext(재고context);
  return (
    <HTML많은곳/>
    <Test></Test>
  )
}

function Test(){
  return <p> 재고 : ???? </p>
}

1. React.createContext() 로 범위 생성
2. <범위 value={재고}> </범위> 이걸로 전송원하는 컴포넌트를 감싼다
3. state 사용을 원하는 컴포넌트는 useContext(범위)를 이용.

 

1,2번은 위에서 적용했으니, 3번만 적용한다

function Test(){
  let 재고 = useContext(재고context);
  return <p> 재고 : {재고}</p>
}

성공~!

 

 

응용 : state 전달하고싶은 컴포넌트가 다른 파일에 있다면? (Detail.js)

1. export(내보내겠습니다!)로 범위를 만들고 (App.js)
2. 범위로 감싸고 (App.js)
3. import로 가져오고, 범위를 가져다가 쓰면 된다. (Detail.js)

(App.js)

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

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

  return (
    <HTML많은곳/>
    <재고context.Provider value={재고}>
      <Detail/>
    </재고context.Provider>
  )
}

(Detail.js)

import {재고context} from './App.js';

function Detail(){
  let 재고 = useContext(재고context);  //근데 여기서 에러남 ㅅㄱ

  return (
    <HTML많은곳/>
  )
}

성공!