중첩된 컴포넌트가 몇개 없으면 props가 가장 간단하고 좋지만
중첩된 컴포넌트를 대비하여 편하게 쓸 수 있는 Context API에 대하여.
<조부모 컴포넌트>
<부모 컴포넌트>
<자식 컴포넌트 />
</부모 컴포넌트>
</조부모 컴포넌트>만약 조부모에서 설정한 state를 자식 컴포넌트에서 사용하려면
부모를 거쳐서 props를 통해 받아 와야한다.
만약 자식의 자식의 자식의.. 깊이 들어가게 되면 props 지옥에 빠지게 될것이다.
이를 해결하고자 나온것이
✅context API
하위 컴포넌트들이 props없이도 상위컴포넌트의 state를 사용가능하게 해줌.
(App.js)
import React, { createContext } from "react";
let 재고context = createContext();
function App(){
let [재고, 재고변경] = useState([10,11,12]);
return (
<HTML많은곳/>
)
}▲ 1. 일단 같은 state 값을 공유하고 싶으면 context부터 만든다.
createContext()라는 함수를 이용해 변수 생성(소포박스라고 생각)
(App.js)
let 재고context = createContext();
function App(){
let [재고, 재고변경] = useState([10,11,12]);
return (
<HTML많은곳/>
<재고context.Provider value={재고}>
<카드레이아웃3개생성하는부분/>
</재고context.Provider>
)
}▲ 2. state 값 공유를 원하는 컴포넌트들을 싼다.
// 재고context라는 소포박스를 Provider표시와 함께 하위컴포넌트에게 전달
그리고 value={state이름} 이렇게 공유할 state를 집어넣으면 끝!
// value는 수신자 정보가 붙어 있는 종이라고 생각.
(App.js)
import React, {useState, useContext} from 'react';
let 재고context = createContext();
function Card(){
// state 사용을 원하는 컴포넌트에서 다음과 같이 불러온다.
let 재고 = useContext(재고context);// 소포 박스를 받아서 내 물건이 맞는지 확인.
return (
<HTML많은곳/>
<div>{재고[0]}</div>
)
}▲ 3. state를 사용하고 싶으면 useContext() 라는 훅을 이용해서 사용을 원하는 context를 불러와야 한다.
위에서 쓴건 재고context에 들어있는 state를 변수로 저장해 쓰겠습니다~ 라는 문법.
그럼 이제 '재고'에는 value={재고} 그대로 들어감.
(*useContext 훅을 쓰려면 상단에 ‘react’ 로부터 import필수)
Q. props보다 불편한거 같은데..?
A. 셋팅도 해놓고 등등 불편한건 사실임.
중첩해서 사용한 컴포넌트가 많을 때 빛을 발하는 문법임.
그냥 <컴포넌트> -> <컴포넌트> 정도는 그냥 props 쓰는게 가장 편함
그럼 <Card> 안에 하위컴포넌트를 하나 더 넣는 예시.
거기서 재고 state를 사용해보도록 하자.
(App.js)
import React, {useState, useContext} from 'react';
let 재고context = React.createContext();
function Card(){
// 이 문장을 더이상 써줄 필요가 없음
let 재고 = useContext(재고context); // 중간 다리 역할이였던 Card컴포넌트에서는 어떤 관여도 안함.
return (
<HTML많은곳/>
<Test />
)
}
function Test(){
let 재고 = useContext(재고context);
return <p>{재고}</p>
}▲ Card안에 Test라는 컴포넌트를 생성한 상태.
이제 Context 문법을 사용해 <Test>까지 재고라는 state를 전송해주려면 어떻게 하나?
응용 : 컴포넌트가 다른파일에 있다면?
Detail.js 라는 곳에서 재고라는 state를 쓰고싶으면?
아래처럼 export import를 해줌.
(App.js)
export let 재고context = createContext();(Detail.js)
import {재고context} from './App.js';
function Detail() {
let 재고 = useContext(재고context);
return (
<재고context.Provider value={재고}>
<Detail/>
</재고context.Provider>
)
}정리
- React.createContext()로 범위 생성
let 재고context = createContext();
//재고context라는 소포박스가 생김. 이 안에다가 value로 state라는 물건 넣어주면 됨.
- 같은 값을 공유할 HTML을 범위로 감싸기
<재고context.Provider value={재고}> // 재고라는 state를 공유하겠다. </재고context.Provider> - useContext(범위)로 공유된 값 사용하기 ex)
function Test(){ let 재고 = useContext(재고context); return <p>{재고}</p> }context api 필수 세팅0 : import useContext
context api 필수 세팅1 : ThemeContext와 같은 박스 만들기
context api 필수 세팅2 : 컴포넌트 감싸주기 with value
context api 필수 세팅3 : 사용 원하는 컴포에서 박스 불러오기
