간소화된 리액트 컨텍스트

컨텍스트는 소품을 사용하지 않고 각 단계에서 데이터를 드릴다운하지 않고도 구성 요소 트리를 통해 데이터를 보다 쉽게 ​​전달할 수 있는 방법을 제공하는 반응 객체입니다.

컨텍스트 그림: Scrimba React 과정의 이미지

컨텍스트 그림: Scrimba React 과정의 이미지

props 사용의 단점은 데이터가 자식 구성 요소로 전달될 때까지 구성 요소의 한 분기에서 다른 분기로 데이터를 전달해야 한다는 것입니다. 드릴링으로 알려진 이 데이터 전달 파이프라인은 실망스러울 수 있습니다.

컨텍스트는 라이트/다크 모드와 같이 앱에서 다양한 상태를 관리하는 데 사용할 수 있는 상태 관리 도구로 생각할 수 있으며 일부 사람들에게는 redux와 같은 상태 관리 도구를 대체하는 데 사용되었습니다.

컨텍스트를 사용하기 위해 React 패키지와 함께 제공되는 createContext 메서드를 사용합니다. 이는 다음 구문을 사용하여 호출됩니다.

React.createConetext() 또는 : import {createContext}

이 메서드에는 공급자와 소비자라는 두 가지 구성 요소가 있습니다. 공급자는 상태를 유지하고 소비자에게 전달하는 데 사용되며 소비자는 이를 렌더링할 구성 요소로 전달합니다.

컨텍스트가 실제로 어떻게 사용되는지 확인하기 위해 컨텍스트를 사용하여 앱에 라이트 모드와 다크 모드가 있도록 할 것입니다. 컨텍스트 개체를 전체 앱에서 사용할 수 있도록 하기 위해 다음 코드 줄에서 이것이 어떻게 사용되는지 확인할 수 있습니다.

import React from "react"
import ReactDOM from "react-dom"

import App from "./App"

const ThemeContext = React.createContext()

ReactDOM.render(
<ThemeContext.Provider>
    <App/>
<ThemeContext.Provider>,
document.getElementById("root")
)

index.js

모범 사례를 위해 index.js 파일에 컨텍스트 객체를 생성하는 것은 버그로 이어질 수 있으므로 권장하지 않습니다. 따라서 우리는 컨텍스트에 대해 다른 파일을 만들고 index.js 파일로 내보낼 파일을 인스턴스화합니다. 이것은 아래에 설명되어 있습니다.

import React from "react"
const ThemeContext = React.createContext
export default ThemeContext

themeContext.js

이제 themeContext.js 파일에서 가져오고 Provider 구성 요소에 제공된 값으로 아래와 같이 App 구성 요소를 래핑하여 index.js 파일에서 테마 컨텍스트를 호출할 수 있습니다. 이 경우에 제공된 값은 dark 또는 light이며 어두운 모드와 밝은 모드를 반영하기 위해 index.css 파일에서 스타일이 지정됩니다.

import React from "react"
import ReactDOM from "react-dom"

import App from "./App"
import ThemeContext from "./themeContext"

ReactDOM.render(
<ThemeContext.Provider value="dark">
    <App/>
</ThemeContext.Provider>, 
document.getElementById("root")
)

index.js: 컨텍스트 공급자를 다른 파일에서 가져오는 업데이트된 파일

다음 코드 줄에서는 컨텍스트 메서드의 소비자 구성 요소를 사용하는 방법을 설명합니다. 아래 파일은 다크/라이트 모드 테마 프로젝트의 헤더 파일입니다. 부모 Provider 값에 따라 테마 색상을 변경하기 위해 Consumer 컨텍스트를 사용하여 className에 상태를 전달합니다.

import React, {Component} from "react"
import ThemeContext from "./themeContext"

class Header from extends Component{
        static contextType = ThemeContext()
        render(){
                const theme = this.context
                return(
                        <header className={`${theme}-theme`}>
                                <h2> Light {theme}</h2>
                        </header>=\
                )
            }
}

header.js

이것이 React의 컨텍스트를 이해하는 데 도움이 되었기를 바랍니다. 훌륭한 프론트엔드 엔지니어로 진화하면서 즐거운 해킹을 즐기세요.

자세한 내용은 Reacthere의 공식 문서를 확인하십시오.