React – useContext

by

컨텍스트, 사용 컨텍스트

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 사용


React - useContext 1