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
-
React Context- https://reactjs.org/docs/context.html
-
coding apple - https://online.codingapple.com/course/react-basic/
Leave a comment