[0528] Context API

한별·2024년 5월 28일

스파르타 내배캠 TIL

목록 보기
28/63

useContext도 하나의 전역상태관리 방법이다.
리액트에 내장되어있다.

생성

createContext를 이용하여 Context를 생성한 후 export 한다.
상태를 사용할 컴포넌트들의 상위 컴포넌트에서 <Context.Provider>를 만들어준다.

<ExpenseContext.Provider>
  상태를 사용할 컴포넌트들
</ExpenseContext.Provider>

값 주입

value 속성에 Context에 전역으로 관리할 상태들의 값을 넣어준다

<ExpenseContext.Provider
value={{
       expenses,
       addExpense,
       updateExpense,
       deleteExpense,
}}
>

값 사용

const { expenses, addExpense } = useContext(ExpenseContext);

useContext를 사용하여 이런 식으로 값을 가져올 수 있다.

profile
글 잘 쓰고 싶어요

0개의 댓글