리액트로 데이터 다루기 (5) 전역 데이터 다루기

Context

전역 데이터를 다룰 때 Props와 State만 사용하면 Props를 여러 번, 여러 곳에 내려줘야 하는 문제점이 있다.(Prop Drilling)
=> 그래서 context 사용

Context
: 많은 컴포넌트에서 사용하는 데이터를 반복적인 Prop 전달 없이 공유

사용 방법

LocaleContext.js

import {createContext} from react;
const LocaleContext = createContext('기본값');
export default LocaleContext;

App 컴포넌트의 최상위 태그에 <LocaleContext.Provider>로 감싸주면 안에 있는 컴포넌트를 LocaleContext가 제공하는 값을 쓸 수 있다.
<LocaleContext.Provider value={'ko'}> value 값을 넣어주고

안에 있는 컴포넌트에서

const locale = useContext(LocaleContext);

...
<p>{locale}</p>

이런식으로 사용할 수 있다.

---

Context를 쓸 때는 반드시 값을 공유할 범위를 정하고 써야 하는데,
이때 범위는 Context 객체에 있는 Provider 라는 컴포넌트로 정해줄 수 있다.
이때 Provider의 value prop으로 공유할 값을 내려주면 된다.

import { createContext } from 'react';

const LocaleContext = createContext('ko');

function App() {
  return (
    <div>
       ... 바깥의 컴포넌트에서는 LocaleContext 사용불가

       <LocaleContext.Provider value="en">
          ... Provider 안의 컴포넌트에서는 LocaleContext 사용가능
       </LocaleContext.Provider>
    </div>
  );
}

Context 값에 State 사용하기

App.js

const [locale, setLocale] = useState("ko");

...
<LocaleSelect value={locale} onChange={setLocale} />

LocaleSelect.js

function LocaleSelect({ value, onChange }) {
 const handleChange = (e) => onChange(e.target.value);

 return (
   <select value={value} onChange={handleChange}>
     <option value="ko">한국어</option>
     <option value="en">English</option>
   </select>
 );
}

export default LocaleSelect;