리액트 useContext

Question

안녕하세요. useContext에 대해 공부하던 중 갑자기 당연시하게 해오던 행동에 대해 궁금증이 느껴져서 질문드립니다.먼저 제가 의문점을 느낀 코드입니다.APP.jsconst countContext = MyReact.createContext({}); const CountProvider = ({ children }) => { const [count, setCount] = useState(0); const value = { count, setCount }; return ( {children} ); } const Count = () => { const { count } = MyReact.useContext(countContext); return

{count}

; }; const PlusButton = () => { const { count, setCount } = MyReact.useContext(countContext); const handleClick = () => setCount(count + 1); return } export default () => ( <> ); MyReact.js function createContext(initialValue) { const emitter = createEventEmitter(initialValue); function Provider({value, children}) { React.useEffect(() => { emitter.set(value); }, [value]); return <>{children}; } return { Provider, emitter, }; } function useContext(context){ const [value, setValue] = React.useState(context.emitter.get()); React.useEffect(() => { context.emitter.on(setValue); return () => { context.emitter.off(setValue); }; }, [context]); return value; } 위와 같은 코드가 있을 때 왜 Provider로 하위 컴포넌트들을 감싸주어야만 하는 것인지 궁금합니다...제가 지금하고 있는 생각은 첫번째로 Counter Provider가 실행될 때 countContext가 가지고 있는 value가 업데이트 될 것이고, 그 다음 불려지는 Count와 PlusButton 또한 같은 countContext를 참조하므로 같은 value값을 가지고 오니까 문제가 없다고 느껴집니다... 평상시에는 아무 생각없이 감싸서 사용하고 있었지만, 왜 동일한 Context 객체에서 데이터를 가져오는 것은 똑같은데 어떤 이유에서 감싸주어야하는지가 헷갈리네요... 읽어주셔서 감사합니다 ! 좋은 하루 보내십시오 :)

풍월상신(가니메디안) · Answer

저 역시 학습하고 있는 입장에서 글을 남겨봅니다.남겨주신 예제 코드는 너무 얽혀있어서 상당히 난해하네요.저도 가끔 보는 김정환님의 코드 같아 보이는데요.. 그 분이라면 뭔가 이유가 있어서 복잡한 코드를 만드셨겠죠.올려주신 코드에 관해서는 제가 뭐라 도움을 드릴 수 있을 입장은 아닌 것 같습니다.다만,useContext &#43; useReducer 를 조합하면,redux, zustand 등의 전역 상태관리 라이브러리를 충분히 대체할 만큼 강력하고 편리한 기능을 구현할 수 있습니다.저도 얼마전에야 비로소 해당 유틸리티를 완성해서 조금의 성취감을 얻었기에,혹시 도움이 될까 해서 깃헙 기스트 링크를 남겨봅니다.https://gist.github.com/KangWoosung/5c9b49e462a4b5fbd8e3b32b1830a71b아직 마저 다듬지 못해서 거칠기도 하고 좀 그렇지만, 이해에 도움이 되길 바랍니다.

리액트 useContext

1개의 답변

Q&A 목록