dolog

Context API 본문

React

Context API

dokite 2023. 1. 13. 15:10

230112

 

Context API

 

✔︎ React에서 컴포넌트가 데이터를 다루는 방법으로 props, state, context가 있다

✔︎ props drilling을 해결하기 위해 나타난 방법으로 전역적인 데이터를 다룰때 사용

✔︎ Context는 React 컴포넌트 중 하나이다

 

Context 를 쉽게 설명하자면, 전역적인 데이터를 다룰 때 사용하는데 전역 데이터를 Context 안에 저장한 후 해당 데이터가 필요한 컴포넌트에서 불러와 사용할 수 있게 해준다

 

React에서 Context를 사용하기 위해서는 Context API를 이용해야 하고 Context의 Provider, Consumer를 사용해야 한다

 

  1. Context에 저장된 데이터를 사용하기 위해서는 root 컴포넌트에 Context의 Provider를 사용해 데이터를 제공해야 한다
  2. 데이터를 사용하려면 컴포넌트에서 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