라벨이 react-context인 게시물 표시

React - Context

이미지
  버전정보 react : ^18.2.0 1. react 설치 - terminal을 이용하여 react를 설치합니다. (node v20.10.0) $ npx create-react-app [project name] copy 사진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를 이용하여 해당...