이력서 피드백을 받았는데 나의 무지 때문에 이해가 안 가는 부분이 있었다.
피드백 내용 :
사용 스택에 서버 상태 관리를 위한 react query가 있지만 정작 외부 api 호출을 recoil로 하신 이유가 궁금합니다. 이력서를 보시는 분들도 비슷한 부분이 궁금하다고 느끼시거나 잘 못 처리되었다고 느끼실 것이기 때문에 해당 내용을 보강해주시면 좋을 것 같습니다.
기존 프로젝트에서 React Context API로 장바구니와 유저 상태 관리를 해준 것을 Recoil로 수정을 해주었고, React Query는 상품 리스트 컴포넌트에서 무한스크롤 기능을 구현하기 위해 사용한 기능인데 피드백에서는 외부 api 호출을 recoil로 한 이유가 궁금하다. 이부분이 axios의 오타인지 헷갈리는 상태이다.
그래서 그냥 기능적 차이점을 다뤄서 정리하면 저 질문의 대한 의도를 파악할거 같아서 정리하고자 한다.
React Context 대신 Recoil을 선택한 이유
Context의 한계
성능 문제
Context API는 상태가 변경될 때 해당 상태를 사용하는 모든 컴포넌트(하위 컴포넌트 등)를 리렌더링을 하기 때문에 큰 애플리케이션에서 많은 컴포넌트가 Context를 사용하면 성능저하가 발생합니다.
비동기 처리의 복잡성
Context API는 상태 관리에 주로 사용되며, API 호출과 같은 비동기 작업을 직접 지원하지 않아 비동기 로직을 구현하려면 추가적인 코드가 필요로하여 상태 업데이트가 복잡해집니다. 또한, 직접 로직을 구현해주어도 Context API에는 이를 위한 분리하여 관리해주는 내장 기능이 부족해서 상태 변경(ex. 로딩 상태, 에러 상태 등)과 비동기 작업이 뒤섞여 코드가 복잡해지고 관리하기 어려워집니다.
캐싱과 리페칭
React Query는 데이터 캐싱, 자동 리페칭 및 서브스크립션 기능을 제공하여 API 호출을 효율적으로 관리할 수 있지만 Context API는 이러한 기능을 기본적으로 제공하지 않아 수동으로 구현해줘야 합니다.
코드 가독성
비동기 작업을 Context API로 관리하게 되면 복잡해지고 가독성이 떨어지는 단점이 있습니다.
Recoil이 Context API보다 나은 점
성능 부분적으로 선택적 리렌더링이 가능합니다.
atom과 selector를 사용하여 상태를 관리하여 상태가 변경될 때마다 atom이나 selector를 사용하는 컴포넌트만 리렌더링되므로, 불필요한 리렌더링을 줄일 수 있습니다.
비동기 상태 관리
비동기 데이터 처리는 selector를 통해 쉡게 관리할 수 있습니다. 그러므로, API 호출 결과를 직접 처리하고, 필요한 데이터를 가져오는 로직을 간결하게 작성할 수 있습니다.
상태의 독립성
Recoil의 atom은 독립적인 상태조각으로 서로 다른 상태를 쉽게 관리하고 조합하여 모듈화된 상태 관리를 할 수 있다. (그에 반면 context API는 모든 상태를 하나의 Context에 담아야하기 때문에 의존성이 복잡해질 수 있습니다.)
React Context API는 작은 규모의 애플리케이션이나 간단한 상태 관리에는 유용하지만, 비동기 작업과 서버 상태 관리를 효율적으로 처리하기 위해서는 React Query와 같은 도구가 더 적합하다고 생각했습니다.
리액트 쿼리를 왜 사용하는가?
1) 간편한 데이터 관리
2) 실시간 업데이트 및 동기화
3) 데이터 캐싱
4) 서버 상태 관리
5) 간편한 설정
이러한 여러 이유가 있는데 저는 react-query를 통해 서버 상태 관리 기능과 무한 스크롤을 구현하기 위해 사용했는데
아직까지 피드백에 대한 내용을 너무 꼬아서 생각하는건지 이해가 안간다.
recoil 클라이언트 측 상태관리
react query 서버 상태 관리
axios 외부 api와 통신....만약 피드백 내용을
사용 스택에 서버 상태 관리를 위한 react query가 있지만 정작 외부 api 호출을 axios로 하신 이유가 궁금합니다. 이력서를 보시는 분들도 비슷한 부분이 궁금하다고 느끼시거나 잘 못 처리되었다고 느끼실 것이기 때문에 해당 내용을 보강해주시면 좋을 것 같습니다.
이렇게 수정한다면
장점
서버 상태 관리: React Query는 서버 상태를 관리하는 데 최적화되어 있으며, 데이터 캐싱, 자동 리페칭, 에러 핸들링을 쉽게 구현할 수 있습니다. 이는 사용자 경험을 크게 향상시킵니다.
API 호출 관리: Axios는 HTTP 요청을 처리하는 데 강력한 라이브러리입니다. 요청과 응답에 대한 인터셉터를 설정하여 공통된 로직(예: 인증 헤더 추가, 에러 핸들링 등)을 적용할 수 있습니다.
유연성: React Query와 Axios를 함께 사용하면, API 호출을 Axios를 통해 수행하면서도 React Query의 장점(캐싱, 리페칭 등)을 활용할 수 있습니다.
이렇게 명시적으로 작성해주어야할지 고민입니다.
