24. 05. 31 TIL (context api)

코드를 다 짰는데 다 짠 게 아니다.

이제 useContext 활용해서 다시 수정해야 됨...

 

근데 난 아무것도모르는덷어떻게하라고요?.......

 

그ㅐ서 이것저것 찾아보다가 더 모르겠어서 강의보고 따라서 해봤다.

 

먼저 파일 하나를 만든다.

 

context 폴더를 만들고 나서 context.js 파일을 만들어야 한다.

 

import { createContext } from 'react';

export const BudgetContext = createContext(null);

그리고 이렇게 적어줌.

 

 

이제 상위 라우터 파일에 가서 이러코롬 가져와준다.

import { BudgetContext } from '../context/BudgetContext';

 

 

그 담에 useState로 만든 상태들을 다른 컴포넌트에서 사용하기 위해

return (
  <BudgetContext.Provider
    value={{
      saveMonth,
      setSaveMonth,
      itemList,
      setItemList,
      MonthSaveFunc,
    }}
  >

provider (하위 컴포넌트에 전달) 를 쓰고, value로 값들을 전달하는 것.

 

이제 쓰였던 props는 삭제해준다. (속시원)

 

이제 쉬운 게 저 state들을 사용하고 싶다?

 

바로 하위 컴포넌트로 갓.

import { BudgetContext } from '../context/BudgetContext';

요고랑.

const { saveMonth } = useContext(BudgetContext);

요고 넣어서 saveMonth 가져왓.

 

useContext로 budgetcontext에서 saveMonth를 가져와준다.

 

 

 

근데

 

 

 

처음ㅇ ㅔ실행이 안 되는 것이었다...

 

아니 왜?...

 

뭐가 문제지 싶어서 콘솔 보고 코드 뚫어져라 쳐다봤는데 딱히

 

 

없는 것 같고...?

 

근데 알고보니!!!!!!!!!!!!!!!!!!

 

 

세미콜론을 안 붙여서.

const { saveMonth } = useContext(BudgetContext)

...................................