FE 기술 스택

React Query

• 서버와 통신하여 주고 받는 데이터가 많습니다.
  • 저희 서비스는 여행 기록 서비스로, 잦은 정보 수정으로 서버와 통신하는 횟수가 많습니다. 정보를 수정한 후 즉각적인 반영으로 보는 것이 좋은 사용자 경험을 제공하는데 필수적이기 때문에 React Query를 선택했습니다.
  • GET 요청을 보낼 때, React Query의 suspense, error boundary를 사용해서 선언적으로 비동기 처리를 할 수 있습니다. GET 이외의 요청에 대한 에러는 useMutation의 onError를 통해서 에러 토스트를 보여줌으로써 상황에 따라 적절한 에러 대체를 할 수 있습니다.
• 데이터 업데이트 후 업데이트된 데이터를 서버에서 받아오기 전 낙관적 업데이트를 통해 UI를 변경하고, 에러 발생 시 롤백을 쉽게 할 수 있습니다.
  • 정보 수정 api 중에서 정보 수정 후 즉각적으로 사용자에게 업데이트 결과를 보여줘야 하는 경우 낙관적 업데이트를 통해 먼저 변경된 UI를 보여줄 수 있습니다.
• 데이터 업데이트 후 필요한 데이터만 무효화한 후 재요청할 수 있습니다.
  • 여행 정보 데이터는 크게 여행 정보, 데이로그 정보, 그리고 각 데이로그의 여행 아이템의 정보를 담고 있습니다. 각 데이터에 대한 GET api가 있지만, 네트워크 통신 횟수를 줄이기 위해서 여행 정보를 요청한 다음에 그 정보를 토대로 모든 컴포넌트를 렌더링하고 있습니다. 이때, 각 상세 정보를 변경한 다음에 변경된 여행 정보 데이터를 재요청해야 합니다.react query에서 키만 알고 있으면 queryClient를 통해서 다른 데이터도 무효화할 수 있기 때문에 저희 프로젝트에서 유용하게 사용할 수 있습니다. 또한 로그아웃 queryClient를 통해서 로그아웃 시 캐시된 데이터를 전부 삭제할 수도 있습니다.
• 서버 상태를 전역 상태로 관리할 수 있습니다.
  • 저희 서비스는 각 페이지에서 많은 일들이 일어나고 있습니다. 그래서 자연스럽게 컴포넌트를 많이 나누게 되었는데, 각 컴포넌트가 서버 데이터를 필요로 하고 있는데, react query를 통해 props drilling을 하는 대신 필요한 컴포넌트에서 직접 캐시된 데이터를 가져온 후 사용할 수 있습니다.
• React Query가 추구하는 방향은 서버의 데이터 상태와 클라이언트의 데이터 상태를 동일하게 유지하는 것입니다.
  • 서버와의 상호작용이 중요한 서비스입니다. 사용자가 즉각적으로 자신이 변경한 사항이 적용되었는지 확인하는 것이 중요합니다. 그렇기 때문에 SWR처럼 일단 캐싱된 데이터를 통해서 화면을 최대한 빠르게 보여주는 것이 중요하다고 생각하는 것보다, 서버와 일치하는 최신의 데이터를 보여주는 것이 중요하다고 생각합니다.

Emotion

• 동적인 스타일링을 하기 위해 CSS-in-JS의 Emotion을 선택했습니다.
  • props에 따라 동적으로 스타일링하는 것이 중요합니다. 저희 컴포넌트에서는 variant, size, status등에 따라 스타일을 다르게 보여주어야 하기 때문에 CSS-in-JS를 선택했습니다.
• Emotion의 CSS Prop 활용
  • CSS Prop 방식을 통해 HTML 태그를 그대로 사용할 수 있습니다. CSS-in-JS 방식에는 styled-components가 있는데, styled-components의 styled를 사용하면 스타일드 컴포넌트를 네이밍을 해야 했습니다. 컴포넌트를 네이밍 하면서 이 태그가 무엇인지 어떤 용도를 가지고 사용되는지를 네이밍을 통해 보여주는데 어려움을 겪었습니다. Emotion의 CSS Prop을 통해서 의식적으로 시맨틱 태그를 사용할 수 있습니다. 또한, 인라인으로 스타일을 작성하면 네이밍 문제도 해결할 수 있습니다.
  • CSS Prop에 스타일을 배열로 담을 수 있습니다. 이 방식을 통해 다양한 스타일을 조합해서 스타일링을 할 수 있고 중복 코드도 줄일 수 있습니다.