인프런 커뮤니티 질문&답변
작성한 질문수
chapter14 잘이해가 되지않습니다..
해결된 질문
작성
·
64
1
안녕하세요
소플님 덕분에 리액트 공부 잘하고 있습니다.
chapter14 실습영상을 계속 돌려보고 있는데 이해가 안가서요..
DarkOrLight 컴포넌트가 ThemeContext MainContent 두개의 컴포넌트를 하위로 가지고 있는거 같은데
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
<MainContent />
</ThemeContext.Provider>
);
ThemeContext.Provider Provider 로 감싼다는 부분이 이해가 잘안되서요 ㅠ
Provider 로 감쌌을때 ThemeContext 컴포넌트를 사용한다는 의미인가요?
전체적인 설명 부탁드립니다 ~!!
답변 2
1
안녕하세요, 소플입니다.
먼저 강의에서 보셨다시피 Context를 사용하는 이유는,
어떤 컴포넌트가 컴포넌트 트리 상에 어디에 위치해있든지 관계없이 특정 데이터에 접근할 수 있게 하기 위함입니다.
이것은 우리가 흔히 Prop Drilling이라고 부르는 문제를 해결하기 위한 방법 중에 하나이기도 합니다.
props를 통해서 데이터를 전달하는 것 자체는 문제가 아니지만, 그 깊이(depth)가 깊어지면 컴포넌트 코드가 지저분해지고 관리하기 쉽지 않게 됩니다.
그래서 일반적으로는 Redux 같은 전역 상태 관리 라이브러리를 사용하거나, 간단하게는 Context API를 사용하게 됩니다.
하지만 Context API를 사용한다고 해서 무조건 모든 컴포넌트가 해당 데이터에 접근할 수 있는 것은 아닙니다.
누군가는 데이터를 제공(Provide)해줘야 하고, 그래야만 누군가가 그 데이터를 소비(Consume) 할 수 있습니다.
여기서 데이터를 제공하는 역할을 하는 것이 바로 Context의 Provider컴포넌트이고, 소비하는 것이 Provider컴포넌트의 하위에 있는 Consumer 컴포넌트 입니다.
클래스 컴포넌트를 주로 사용하던 과거에는 아래 링크에 있는 것과 같이 Consumer 컴포넌트를 별도로 사용했는데, 함수 컴포넌트를 사용하는 지금은 useContext() 훅을 사용해서 Provider 컴포넌트가 제공하는 값에 접근할 수 있습니다.
정리해보면, Provider 컴포넌트는 자신의 하위 컴포넌트에 value라는 prop으로 전달받은 데이터를 찔러주는 역할을 한다라고 할 수 있을 것 같습니다.
이해가 안 되는 부분은 추가로 질문 남겨주시기 바랍니다~!
감사합니다.
제가 이해한거는 ThemeContext 전역변수? 사용하여 DarkOrLight 에서 ThemeContext .provider 로 ThemeContext 전역변수의 값 theme, toggletheme 을 MainContent 넘겨줘서 MainContent에서 theme, toggletheme을 사용한다는 의미로 이해하면 될까요?
useCallback() 훅은 함수를 Memoization하기 위한 훅입니다.
Memoization은 동일한 연산의 결과를 저장해놓고 사용하는 최적화 방법 중에 하나이구요.
그래서 굳이 useCallback() 훅을 사용하지 않더라도 작동하는데에는 문제가 없습니다.
다만, 컴포너트가 재렌더링 될 때마다 함수가 다시 정의된다는 차이만 있는 것이죠.
그리고 두 번째 질문과 관련해서는 이해하신 부분이 어느정도는 맞습니다.
다만, Provider 컴포넌트가 제공하는 값을 하위에 있는 모든 자식 컴포넌트가 다 소비하는 것은 아니고, useContext() 훅을 사용하거나 Consumer 컴포넌트를 사용하는 자식 컴포넌트들이 해당 값에 접근할 수 있게 되는 것이라고 이해하시면 됩니다.
0
안녕하세요, 인프런 AI 인턴입니다. limganji님.
리액트의 Context API를 이해하는 것은 꽤 도전적인 부분이기도 한데요, 질문 주신 내용에 대해 설명드리겠습니다.
ThemeContext.Provider는 Context API의 중요한 부분입니다. 여기서는 리액트 애플리케이션에서 특정 데이터를 전역적으로 관리하고 사용할 수 있도록 도와줍니다.
Provider의 역할:ThemeContext.Provider는value속성을 통해 하위 컴포넌트에 데이터를 전달할 준비를 합니다.value속성에{ theme, toggleTheme }를 넣음으로써, 이 값을 콘텍스트로 전달하고, 하위 컴포넌트에서 이를 사용할 수 있게 만듭니다. 여기서 중요한 점은,Provider로 감싸진 컴포넌트만이 이Context데이터에 접근할 수 있게 된다는 것입니다.MainContent컴포넌트 사용:MainContent컴포넌트는ThemeContext.Provider내부에 있기 때문에,ThemeContext를 통해 제공되는theme와toggleTheme에 접근할 수 있습니다. 이를 통해MainContent는 전역 상태인 테마 값을 쉽게 사용할 수 있게 됩니다.Context의 활용: 만약Provider로 감싸지지 않고ThemeContext를 사용하려 한다면, 해당 데이터를 제대로 읽을 수 없게 됩니다. 이는Provider가Context데이터를 설정하고, 이를 통해 하위 컴포넌트가 접근할 수 있도록 하기 때문입니다.
이를 통해 DarkOrLight 컴포넌트는 theme 값을 전역 상태로 관리하면서, 필요할 때 쉽게 테마를 전환할 수 있는 메커니즘을 제공합니다.
자세한 내용은 인프런의 강의 내 컨텍스트 API와 Provider 사용하기 에 대한 기존 질문을 참고해보시면 이해하시는데 큰 도움이 될 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
답변감사합니다. 추가적으로 질문이 있습니다.
DarkOrLight.jsx 파일에서 toggleTheme를 useCallback 훅을 사용안해도 정상작동이 되는거 같은데 useCallback훅의 안써도 상관없는건지 궁금하며 useCallback 훅에 대한 개념설명 요청드립니다.