context 자체가 컴퍼넌트에서 props 를 넘겨주는 방식이 어려울때 사용하는 겁니다. 전신은 context api를
context api 사용
import React, { createContext } from "react";
import Children from "./Children";
// AppContext 객체를 생성한다.
export const AppContext = createContext();
const App = () => {
const user = {
name: "김채원",
job: "가수"
};
return (
<>
<AppContext.Provider value={user}>
<div>
<Children />
</div>
</AppContext.Provider>
</>
);
};
export default App;
사용
import React from "react";
import { AppContext } from "./App";
const Children = () => {
return (
<AppContext.Consumer>
{(user) => (
<>
<h3>AppContext에 존재하는 값의 name은 {user.name}입니다.</h3>
<h3>AppContext에 존재하는 값의 job은 {user.job}입니다.</h3>
</>
)}
</AppContext.Consumer>
);
};
export default Children;
useContext를 사용해도 괜찮다.
'FE > React & RN' 카테고리의 다른 글
Apollo (0) | 2022.06.15 |
---|---|
GraphQL (0) | 2022.06.14 |
[react-native] react-native-ble-plx (0) | 2022.03.30 |
[React-native] 자동 배포 (0) | 2021.11.17 |
Atomic Design (아토믹 패턴) (0) | 2021.11.10 |
댓글