컨텍스트 api

props를 바로 줄 수 있는데,

형제끼리 안되고 조상과 손자끼리는 다이렉트로 줄 수 있음.

 

api 약자가 application programming interface긴 한데, 보통 보면 데이터 전달 같음.

 

이것도 그런 듯.

 

이거는 useContext라는 훅을 따로 사용해서 그걸 export해서 밖에 표류하게 해 놓음.

 

그러면 자손들 중에 그거 import해서 사용 가능함.

 

export const MessageStateContext = React.createContext();
export const MessageDispatchContext = React.createContext();

이렇게 Context를 생성해 줌

 

return (
<div className="App">
  <MessageStateContext.Provider value={{message}}>
    <MessageDispatchContext.Provider value={{ onAdd, onChange, onCheck }}>
      <Editor></Editor>
      <A></A>
    </MessageDispatchContext.Provider>
  </MessageStateContext.Provider>
</div>
);

이렇게 자식들을 저 콘텍스트로 감싸줌.

콘텍스트.Provider로 공급해 준다는 거임

value가 넣을것임.

 

저렇게 export로 표류시켜준 다음에

지금 내가 A > B > C(반복, 리스트임)

import React, { useContext } from 'react'
import { MessageDispatchContext } from '../App';


function C({message}){
  const {onCheck} = useContext(MessageDispatchContext); 
  .....

저렇게 App.js로 부터 직접 가져온다.

 

그리고, useContext도 필요하다.

const {뿌려준값명} = useContext(뿌려준콘텍스트명);

 

이렇게 뿌려준 값을 담아서 사용할 수 있다.

 

위에서 보면 message라는 것과 콜백메소드를 뿌려줬음.

그럼 그거 받아서 사용할 수 있는거.

 

뿌려준 값명 저거 당연히 맞춰줘야 함.

우리가 { useState } 하면 useState가 골라서 들어오듯 저렇게 해 줘야 함.

 

여튼 저렇게 하면 되는데..

 

좀 문제가 있음.

 

기존에 해놨던 useCallback, React.memo등이 안먹힘.

 

내가 

export const MessageStateContext = React.createContext();
export const MessageDispatchContext = React.createContext();

이렇게 따로 나눠서 뿌려준 것도 따로 최적화 해 줄려고..

 

 

많이 헷갈린다.

이거 하면 이점이 유지보수에 굉장히 좋다.

일일이 props를 타고 들어가게 하지 않아도 되어서..

 

  const memoDispatches = useMemo(()=>{
    return {onCheck, onChange, onAdd}
  },[]);

이걸 이렇게 해서,

<MessageDispatchContext.Provider value={memoDispatches}>

이렇게 넘겨줘 버리면 되긴한다.

 

  const memoDispatches = useMemo(()=>{
    return {onCheck, onChange, onAdd}
  },[]);

이렇게 하면, 메소드 각각이 아니라 객체 자체가 useMemo가 적용되는 것이다.

그런데, memoDispatches.onCheck 등 하면서 객체를 타고가는 거니 useMemo가 적용되는 듯 하다.

 

 

 

 

https://velog.io/@dongha1992/useContext-%EC%B5%9C%EC%A0%81%ED%99%94

 

이 사람꺼 참고하셈.