![]()
useContext + Context API 일반적으로 클라이언트 상태관리 라이브러리 혹은 context API를 사용하지 않는한 props는 부모 컴포넌트에서 하위 컴포넌트에게 단계를 거쳐서 내려줘야 한다. 아래와 같이 2~3단계라면 뭐 그냥 넘어갈 수도 있겠지만, 이정도 규모이상의 프로젝트가 되면 props를 일일히 내려주는게 번거로워진다. 내려주는 것 뿐 아니라, 유지보수할 일이 생기면 저 prop를 사용하는 컴포넌트를 일일히 다 고쳐줘야한다는 수고스러움도 있다. Context API는 일일히 props를 전달하지 않아도 필요한 곳에서만 사용할 수 있도록, 해준다. 하지만 다음과 같은 문제때문에 남발하는 것은 좋지않다. Context를 사용하면 컴포넌트를 재사용하기 어려워질 수 있다. -> cont..
![]()
Next.js 13을 공부하는데, Next의 loading UI가 React의 Suspense와 함께 사용된다는 것을 보고, 잘 모르는 부분이었기에 겸사겸사 공부할겸 기록을 남긴다. function Comp() { const { data } = apiClient.read('api/user'); return ( {data.name} ) } function App() { return ( // 두번째 로딩 UI // 첫번째 로딩 UI // 성공 UI ) } 사용법도, 생김새도 매우매우 직관적이다. fallback: 로딩이 완료되지 않은 경우 children(SomeComponent)을 대체할 UI이다. 어떤 React 노드(jsx)든 괜찮지만, 주로 로딩 스피너나 스켈레톤과 같은 가벼운 플레이스홀더 뷰를 사용..
![]()
Overview state Hooks Context Hooks Ref Hooks Effect Hooks Performance Hooks Other Hooks Your own Hooks State Hooks 상태를 이용하는 훅은 컴포넌트가 사용자 입력과 같은 정보를 기억할 수 있게 해준다. state를 이용하는 가장 대표적인 Hook으로는 useState가 있다. Context Hooks 컨텍스트 훅을 이용하면 컴포넌트가 prop으로 다른 컴포넌트에게 직접 전달하지 않아도 이용가능하게한다. 컨텍스트 훅은 마치 우산같은 개념이다. 특정 컴포넌트에 우산을 설치하면 우산아래에 있는 컴포넌트는 비를 맞지 않아도 된다. (=prop을 props drilling을 피할 수 있다.) 이러한 개념은 Redux, Zust..
