dolog
Context API 본문
230112
Context API
✔︎ React에서 컴포넌트가 데이터를 다루는 방법으로 props, state, context가 있다
✔︎ props drilling을 해결하기 위해 나타난 방법으로 전역적인 데이터를 다룰때 사용
✔︎ Context는 React 컴포넌트 중 하나이다
Context 를 쉽게 설명하자면, 전역적인 데이터를 다룰 때 사용하는데 전역 데이터를 Context 안에 저장한 후 해당 데이터가 필요한 컴포넌트에서 불러와 사용할 수 있게 해준다
React에서 Context를 사용하기 위해서는 Context API를 이용해야 하고 Context의 Provider, Consumer를 사용해야 한다
- Context에 저장된 데이터를 사용하기 위해서는 root 컴포넌트에 Context의 Provider를 사용해 데이터를 제공해야 한다
- 데이터를 사용하려면 컴포넌트에서 Context의 Consumer를 사용해야 한다
- Context를 생성하기 위해 React.creatContext() 함수 사용
ex)
const context = React.creatContext(default value);
- 사용법
Context 객체 안에는 Provider라는 컴포넌트가 존재한다 그 안에는 컴포넌트 간에 공유하고 하는 값(value)을 설정하면 원하는 컴포넌트에서 useContext(hooks)를 사용하여 접근할 수 있다
ex)
// App.js
function App() {
return (
<MyContext.Provider value={…}>
<Message />
</MyContext.Provider>
);
}
// Message.jsx
import { crateContext, useContext } from ‘react’;
function Message() {
const context = useContext(MyContext);
return (
<div>Received: {value}</div>
);
}
⬇️ 또는 커스텀 Hooks로 만들기
function useMyContext() {
return useContext(MyContext);
}
function f() {
const value = useMyContext();
…
- 기본값(default value)의 정체
자식 컴포넌트에서 useContext를 사용하고 있는데, Provider 컴포넌트로 감싸지 않는다면 1)기본값을 설정하지 못했을 때는 undefined 2)기본값을 설정했을 때는 기본값이 나타난다
혹은
function useMyContext() {
const value = useMyContext();
if(value === undefined) {
throw new Error(‘MyContext.Provider 안에 useMyContext가 들어가야 합니다.’);
}
}
'React' 카테고리의 다른 글
React Hooks (0) | 2023.05.24 |
---|---|
Custom Hooks (0) | 2023.01.13 |