props가 귀찮다면 Context API (이거보단 Redux가 좋아)

 

props는 무조건 부모에서 자식으로 자료를 옮겨줘야하는데 컴포넌트가 많아진다면 복잡해 질 수 있다.

그래서 Context API 문법을 쓰거나 Redux 같은 외부 라이브러리 쓰면 되는데 

여기선 Context API을 사용해보자.

 

사용법

 

세팅법

createContext를 import를 해준다.

React.createContext()함수를 가져와서 context1으로 만들어준다.

context는 state보관 창고라고 생각하면된다.

(App.js)
import { useState, createContext } from "react";

export let Context1 = React.createContext();

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

 

자료 보내기

Context1.Provider 태그를 보내고 싶은 컴포넌트에 감싸고 

보내고 싶은 자료를 value={}속성에 넣는다. 

(App.js)
import { useState, createContext } from "react";

export let Context1 = React.createContext();

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

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

 

자료 꺼내기

useContext, Context1을 import해온다.

변수에 담아서 쓰면된다.

(Detail.js)

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

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

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

 

단점

 

솔직히 잠깐 써봤는데 개불편하다.

 

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

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