Context

하위 컴포넌트에서 props 없이도 state를 사용가능하게 만들어줌

1. Context 변수 선언

import React, { useContext} from 'react';
let tempContext = React.createContext(); 

• createContext()를 통해 context()변수 생성

2. Component 감싸기

function app(){
return(


 <tempContext.Provider value={전송할state}>
     <state전송할componet/>
  </tempContext.Provider>

)
}

• 생성한 context변수로 componet 감싸기

3. state 사용

function state전송할componet(){
  let 전송할state = useContext(tempContext);

  return (
    <div>{전송할state}</div>
  )
}

• useContext()를 사용하여 component에서 사용 가능

 

component가 중첩되지 않고 간단한 구조인 경우 => props 사용

component가 중첩되어 state를 여러번 넘겨야 할 경우 =>context 사용