Section 9 연습 프로젝트: 프로젝트 관리 앱(컴포넌트, 상태, 참조 등 적용)
이번 프로젝트에서 컴포넌트, 상태 관리, 참조 등을 활용한 사이드바를 구현함. 이전 3월 미니 프로젝트에서 사이드바를 처음 만들었을 때는 Tailwind CSS를 사용하여 기본적인 스타일링에 초점을 맞췄는데, 이번 사이드바는 ChatGPT처럼 내역이 옆에 계속 표시되는 구조로, 더 사용자 친화적인 형태로 구성하더라
이번에 배운 것들:
Fallback 처리: 네트워크나 데이터 문제 발생 시 안전하게 대체 가능한 방식을 구현.
재사용 가능한 '입력' 컴포넌트 추가: 입력 필드를 다양한 상황에 맞게 재사용할 수 있는 컴포넌트화 작업.
Section 10: 리액트의 컨텍스트 API & useReducer - 상태 관리 심화
TIL1) Prop Drilling 문제 해결
Prop Drilling이란, 상위 컴포넌트에서 하위 컴포넌트로 props를 여러 레이어에 걸쳐 전달해야 하는 상황. 이 과정이 반복되면 코드가 복잡해지고 유지보수가 어려워질 수 있다. 이를 해결하기 위한 방법으로 컨텍스트 API를 사용하여 상태와 데이터를 쉽게 공유할 수 있다.
TIL2) Context API
컨텍스트 API는 컴포넌트 트리 내에서 상태나 데이터를 쉽게 공유하기 위해 만들어졌다. 이를 통해 중간 컴포넌트를 거치지 않고도 데이터가 필요한 컴포넌트에 직접 접근할 수 있다.
createContext: 컨텍스트 객체를 생성하여 데이터 공유를 설정.
useContext: 컨텍스트 데이터를 사용할 때 쓰이는 훅. 해당 컨텍스트를 구독하고, 값을 불러오는 데 사용된다.
TIL3) useReducer로 상태 관리
컨텍스트 API를 사용하면 간단한 상태 관리는 충분히 가능하지만, 복잡한 상태 업데이트 로직이 필요한 경우 useReducer를 활용할 수 있다. useReducer는 리듀서 함수와 액션을 사용하여 상태를 변경하는 훅으로, 특히 상태 관리가 복잡해질 때 매우 유용하다.
useReducer를 사용할 때는 상태를 '업데이트'하는 방식을 명확하게 정의하여, 여러 개의 상태를 관리할 수 있다.
Learned
최근 기술 면접을 준비하면서 상태 관리에 관한 답변을 할 때, 잘 알지도 못하면서 늘 Recoil이나 Redux와 같은 라이브러리들만 언급해왔던 것 같다.(알지도 못하면서 왜 대답하니) 물론 이러한 라이브러리들이 강력한 도구인 것은 사실이지만, 상태 관리를 위해 꼭 이것들만 사용하는 것은 아니라는 점을 깨달았다.
이번에 학습한 컨텍스트 API와 useReducer는 리액트 내장 기능만으로도 충분히 상태 관리를 할 수 있다는 것을 알려줬다. 사실, 내가 알고 있기로는 고래(회사)는 Context API를 사용하지 않는다고 들었다. 상황에 따라 적절한 도구를 사용하는 것이 중요하다는 것을 다시금 느끼게 되었다. (설마 사용한다 하셨나요,,,)
다양한 상태 관리
Prop Drilling 해결을 위한 Context API
컴포넌트 간에 데이터를 여러 레이어로 전달할 때, 중간 단계에서 props를 계속 전달하는 불편함을 해소해주는 방법입니다. Context API는 간단한 상태 공유에는 충분히 유용.
복잡한 상태 업데이트를 위한 useReducer
단순한 상태 변경 외에, 여러 조건에 따라 상태를 업데이트할 필요가 있을 때 useReducer를 사용하는 것이 더 적합함. 특히, 상태 변경 로직이 복잡할 때 이를 함수로 분리해 관리할 수 있어 코드의 가독성과 유지보수성이 높아진다.
Recoil, Redux 외에도 다양한 선택지가 있다
Redux나 Recoil이 대규모 애플리케이션에서 사용하기 좋은 도구들이긴 하지만, 모든 프로젝트에 반드시 이들만을 사용할 필요는 없다. 컴포넌트의 복잡성에 따라 더 가벼운 상태 관리 방법도 고려해볼 수 있다. 그 예로 Context API와 useReducer를 사용할 수 있고, 때로는 useState만으로도 충분할 때가 있다.
질문 거리
컨텍스트 API vs useReducer
컨텍스트 API로 충분히 상태 관리를 할 수 있을 것 같은데, 어느 경우에 useReducer를 도입하는 게 더 나은 선택인지.특히, 상태가 복잡하게 변하는 애플리케이션에서 useReducer의 장점이 컨텍스트 API에 비해 어떻게 표현될지.
Recoil이나 Redux 대신 컨텍스트 API만으로 충분한가?
상태 관리 라이브러리인 Recoil이나 Redux는 보다 복잡한 상태 관리에 적합하다고 알고 있는데요. 반면에 단순한 애플리케이션에서는 컨텍스트 API만으로 충분하다는 의견도 있네요? 어느 시점에서 컨텍스트 API를 넘어 상태 관리 라이브러리를 도입하는 것이 좋은 선택인지! 궁금합니당
