개발자
리액트 context api
* ContextProvider 정의* const LocationContext = createContext() export const LocationProvider = ({children})=> return ( <LocationContext.Provider value={contextValue}> {children} </LocationContext.Provider> ); }; --------------------------- asd.jsx <ContextProvider> <A/> </ContextProvider> ---------------------- qwe.jsx <ContextProvider> <B/> </ContextProvider> ---------------------------------- 이런식으로 작성했을때 A컴포넌트에서 컨택스트 내부 값을 변경하면 B컴포넌트가 재 랜더링 되나요? (되는줄 알았는데 안돼서요..ㅠ)
답변 1
context는 state와는 살짝 다릅니다. <A/>와 <B/> 내부에 어떤 훅들이 따로 있는지 모르겠지만 '전파'를 하고 싶다면 관련 훅들을 사용하셔야 합니다.
익명
작성자
2024년 02월 28일
오 답변 키워드로 찾아볼게요! 감사합니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 02월 27일
네, 그렇습니다. React Context API는 확장된 트리에 있는 모든 컴포넌트들에게 데이터를 제공할 수 있습니다. 같은 context를 공유하는 A와 B라는 두개의 컴포넌트가 있다고 가정하면, A에서 context 값을 변경하면 해당 context를 구독하고 있는 B도 이 변화를 감지하여 리렌더링이 발생합니다. 하지만 리렌더링이 안되는 경우가 있다면 다음과 같은 가능성을 먼저 확인해봐야 합니다. 1. Context가 올바르게 설정되었는지 확인하세요. 2. Context value에 변경이 실제로 일어났는지 확인하세요. 객체 참조나 배열의 경우, 직접적인 변경보다는 새로운 상태값으로 대체하는 것이 좋습니다.(즉, 상태 불변성을 유지하세요) 3. B 컴포넌트가 실제로 context의 변화를 구독하고 있는지 확인하세요. 즉, B컴포넌트 내부에서 useContext 훅을 사용하여 context value에 접근하고 있는지 확인해 보세요. 위 사항들을 체크한 후에도 문제가 해결되지 않는다면 코드의 다른 부분에서 문제가 있을 수 있으므로 좀 더 자세한 디버깅이 필요할 것입니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!