React - Context

 

버전정보

react : ^18.2.0

1. react 설치

- terminal을 이용하여 react를 설치합니다. (node v20.10.0)

$ npx create-react-app [project name]

사진1) react를 npx으로 셋팅

사진2) context 추상도

context가 커버하는 범위에 따라 그에 영향받는 components들이 있습니다. 사진2에서 Context가 App전체에 영향을 준다면 components가 App의 하위에 존재하는한 어디든지 state값을 사용할수 있습니다.

사진3) context value 업데이트

예로 들어 A component에서 method를 이용해서 Context의 value값을 변경했습니다. 이때 state는 변경과 동시에 적용이 됩니다.

사진4) context 업데이트시 다른곳도 적용

적용된 value를 사용하는 다른 component(A, B)에 변화에 따른 re-randering이 들어갑니다. 

// src/context/count.context.jsx

import { createContext, useState } from "react"

// 실제 컴포넌트에서 Access할 데이터

export const CountContext = createContext({

currentNum: null, // 실제 컴포넌트에서 읽을 카운트값

setCurrentNum: () => null, // 카운트 값을 변경하기 위한 메소드

})

export const CountProvider = ({ children }) => {

// useState를 이용하여 currentNum, setCurrentNum을 설정하고 currentNum의 초기값을 0으로 한다

const [currentNum, setCurrentNum] = useState(0)

// Provider를 이용하여 해당 범위의 컴포넌트에 제공하기 위해서 value값을 지정한다.

const value = { currentNum, setCurrentNum }

return <CountContext.Provider value={value}>{children}</CountContext.Provider>

}

code1) Context와 Provider를 생성한다.

// src/index.js

import React from "react"

import ReactDOM from "react-dom/client"

import App from "./App"

import { CountProvider } from "./context/count.context"

import "./index.css"

import reportWebVitals from "./reportWebVitals"

// CountProvider를 App에 감싸서 App 및 하위 컴포넌트에 CountProvider의 value가 사용될수 있도록 한다.

const root = ReactDOM.createRoot(document.getElementById("root"))

root.render(

<React.StrictMode>

<CountProvider>

<App />

</CountProvider>

</React.StrictMode>

)

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals()

code2) CountProvider를 App으로 감싼다

// src/App.js

import { useContext } from "react"

import "./App.css"

import { CountContext } from "./context/count.context"

const App = () => {

// useContext를 이용하여 currentNum, setCurrentNum을 불러온다.

const { currentNum, setCurrentNum } = useContext(CountContext)

// Up버튼을 누를시 currentNum이 1씩 증가

const handlerUp = () => {

setCurrentNum(currentNum + 1)

}

// Down버튼을 누를시 currentNum이 1씩 감소

const handlerDown = () => {

setCurrentNum(currentNum - 1)

}

return (

<div>

<h1>Test : {currentNum}</h1>

<button onClick={handlerUp}>up</button>

<button onClick={handlerDown}>down</button>

</div>

)

}

export default App

code3) App.js에서 CountContext 사용

사진5) 동작 결과

GitHub Link : https://github.com/Alex-Choi0/react_context_sample1.git