컨텍스트, 사용 컨텍스트
React로 빌드된 앱은 여러 구성 요소로 구성됩니다.
최상위 앱 구성 요소로 시작하여 트리 형태로 확장됩니다.
React의 일반적인 데이터 흐름은 전문가를 통해 부모 구성 요소에서 자식 구성 요소로 하향식입니다.
전문가를 사용하여 데이터를 전달할 때 상위 구성 요소는 각 하위 구성 요소 태그에 전문가를 넣고 단계별로 전달해야 합니다.
앱 내의 많은 구성 요소가 공통적으로 필요로 하는 전역 데이터가 있을 수 있습니다.
글로벌 데이터를 전문가에게 단계별로 전달해야 할 때 복잡해집니다.
그래서 React는 컨텍스트 API를 제공합니다.
컨텍스트는 여러 구성 요소가 앱 내에서 전역적으로 사용되는 데이터를 쉽게 공유할 수 있는 방법을 제공합니다.
컨텍스트는 절대적으로 필요한 경우에만 사용해야 합니다(구성 요소 재사용이 어려울 수 있음): 전역 데이터를 다양한 수준의 많은 구성 요소에 전달해야 합니다.
예
app.js
import React, { useState } from 'react'
import Page from './component/Page'
import { ThemeContext } from './context/ThemeContext'
const App = () => {
const (isDark, setIsDark) = useState(false)
return (
<ThemeContext.Provider value={{isDark, setIsDark}}>
<Page />
</ThemeContext.Provider>
)
}
export default App
컨텍스트 > ThemeContext.js
import { createContext } from "react";
export const ThemeContext = createContext(null);
구성요소 > Page.jsx
import React, { useContext } from 'react'
import { ThemeContext } from '../context/ThemeContext'
import Content from './Content'
import Footer from './Footer'
import Header from './Header'
const Page = () => {
const data = useContext(ThemeContext)
return (
<div className="page">
<Header />
<Content />
<Footer />
</div>
)
}
export default Page
구성 요소 > 헤더.jsx
import React, { useContext } from 'react'
import { ThemeContext } from '../context/ThemeContext'
const Header = () => {
const {isDark} = useContext(ThemeContext)
return (
<header className="header" style={{
backgroundColor: isDark ? 'black' : 'lightgray',
color: isDark ? 'white' : 'black'
}}>
<h1>header</h1>
</header>
)
}
export default Header
구성요소 > Context.jsx
import React, { useContext } from 'react'
import { ThemeContext } from '../context/ThemeContext'
const Content = () => {
const {isDark} = useContext(ThemeContext)
return (
<div className="content" style={{
backgroundColor: isDark ? 'black' : 'white',
color: isDark ? 'white' : 'black'
}}>
Hello
</div>
)
}
export default Content
구성요소 > Footer.jsx
import React, { useContext } from 'react'
import { ThemeContext } from '../context/ThemeContext'
const Footer = () => {
const {isDark, setIsDark} = useContext(ThemeContext);
const btnClick = () => {
setIsDark(!
isDark)
}
return (
<footer
className="footer"
style={{
backgroundColor: isDark ? 'black' : 'lightgray',
color: isDark ? 'white' : 'black'
}}
>
<button
className="button"
onClick={btnClick}
>Dark Mode</button>
</footer>
)
}
export default Footer
개별적으로 프로를 추가하지 않고 사용할 수 있는 useContext 사용