[항해99 95일차] 2022.06.09 TIL (모의면접 준비 )

오늘은 모의 면접 데이다 !!

8시에 있는 모의 면접을 위해..1분 자기소개를 준비해야겠다 ~!

리액트 쿼리 ? 리덕스 ? 상태관리 ?

머릿속에서 아직 제대로 정리가 되지 않았다 !!!

 

🍄 Redux 말고 다른 전역 상태관리 아는 것 하나와 차이점을 말해주세요.

 

🌱 전역상태관리툴 리액트 쿼리

 

- 👩‍💻 React Query의 기능을 간단하게 요약하여 정리해보면 다음과 같습니다.

• 클라이언트에서 서버 데이터의 캐시를 관리합니다.
• loading, error state를 관리합니다.
• pagination, infinite scroll도 쉽게 처리할 수 있도록 지원합니다.
• prefetching을 쉽게 처리할 수 있도록 지원합니다.
• error가 발생할 경우 자동으로 재시도합니다.
• request가 성공하거나 실패했을 때 각각 callback을 정의할 수 있습니다.

- 👩‍💻이런 기능들은 React Query를 사용하지 않아도 모두 구현할 수 있기는 합니다. 하지만 React Query는 이 기능들을 모두 내장하고 있어 코드량을 줄일 수 있고 사용하기 편리합니다.

- 👩‍💻React Query는 클라이언트와 서버의 중간 즈음에 위치하고 있는 듯한 느낌을 줍니다.

- 👩‍💻클라이언트에서 axois 나 ky 등을 이용하여 서버에 데이터를 요청하면 서버에 바로 요청이 전달되는 것이 아니라 React Query가 해당 요청을 관리하는 듯한 느낌을 받았습니다.

- 👩‍💻데이터가 캐시에 존재한다면 캐시의 데이터를 클라이언트에 전달하고, prefetching을 활용하여 당장 화면에 출력하지 않는 데이터를 관리하기도 합니다.

 

🍄 Client state vs. Server state

- 👩‍💻 React Query를 사용하려면 몇 가지 중요한 개념을 이해해야 합니다. 그 중 가장 처음에 등장하는 것이 Client state vs Server state 입니다.

• Client state
  • 서버에서 받아 온 정보가 아니라 각 client에서만 관리하는 state
  • 사용자가 선택한 언어, theme 등
• Server state
  • Client가 Server에서 받아오는 모든 정보

- 👩‍💻React Query는 Server state만을 관리합니다.

- 👩‍💻처음에 이 정보를 접했을 때 그럼 Client state를 관리하는 무언가가 필요한거 아닌가? 라고 생각했습니다.

- 👩‍💻하지만 실제로 사용해보니 Client state를 관리할 필요가 생기는 경우가 극히 드물었습니다.

 

 

🍄 리액트 쿼리 기본 사용법

 

-👩‍💻 yarn 이나 npm 등을 이용하여 react-query 를 설치한 후에 src/component/App/App.tsx 파일에 다음과 같이 기본 코드를 추가합니다.

-👩‍💻 QueryClientProvider

• 리액트 쿼리 사용을 위해 QueryClientProvider 를 최상단에서 감싸주어야한다.
• 쿼리 인스턴스를 생성 후 client={queryClient} 작성해준다.

import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Home />
    </QueryClientProvider>
  );
}

 

 

리액트 쿼리가 아니라 컨텍스트 api와 리덕스의 차이점을 알야겠다..ㅋㅋㅋㅋ

ㅠㅠ

참고 블로그:https://blog.doitreviews.com/development/2021-08-27-react-query-tutorial-01/