개발공작소
728x90
반응형
article thumbnail
[React] 리액트 Context Provider 모듈 분리하는 방법 + 분리하는 이유
FrontEnd/React 2024. 4. 20. 16:14

오늘은 그냥 리액트에서 Context를 사용하는 또 다른 방법을 정리해보려고 한다.. Context.Provider 분리하는 이유 유튜브에서 Context관련 글을 검색해 보는데, 다음과 같은 영상이 눈에 들어왔다. 썸네일만 보면 Context 컴포넌트의 Provider 프로퍼티를 쓰지 말고, Comtext.Provider 컴포넌트를 만들어 써라 라는 느낌의 그림이다. 대충 내용만 요약하자면, Context컴포넌트를 따로 모듈로 분리해서 사용해라인데, 그 이유는 일반적으로 상위 컴포넌트에서 하위 컴포넌트들에게 데이터를 전달하기 위해 를 쓰면 state가 변경되면서 useContext로 데이터를 받지 않는 다른 자식컴포넌트 즉, 모든 컴포넌트가 리랜더링 되니 성능상 좋지 않다. 라는 내용이었다.. 위 영상..

article thumbnail
[React] 리액트 컴포넌트간 데이터 전달 : Context 훅에 대한 정리 (feat. createContext + useContext)
FrontEnd/React 2024. 4. 20. 15:43

Context란? 1. useContext란? React의 Context란 컴포넌트간의 데이터를 전달하는 방법이다. props와는 달리 createContext훅과 useContext훅을 이용하여 컴포넌트간 데이터를 전달 할 수 있다. 2. useContext를 왜 사용하는걸까? 그럼 props를 이용해서 컴포넌트간 데이터를 전달하면 되는거 아닌가? 라는 생각이 들 수 있다. 근데 props에는 커다란 문제가 있었는데.. 자기 자식한테만 보낼 수 있다는 문제이다.. 뭐 고작 그런거 가지고? 라고 할 수 있는데, 만약 자식컴포넌트가 엄청 많다면? 아래와 같은 문제가 발생한다.. 자식의 자식의 자식의 자식까지 계속 props로 전달해야 한다. 즉 한번에 보내지 못한다는 문제.. 이런 걸 Props Drill..

728x90
반응형