[React-query & Recoil]

1. useQuery, useMutation, useQueryClient 훅에 대해서 각각 설명하시오
   
    useQuery 훅은 데이터를 서버로부터 가져오기 위해 사용됩니다. 이 훅은 기본적으로 비동기 작업을 수행하고 데이터를 캐싱하며, 데이터가 변경될 때 자동으로 리렌더링되도록 해줍니다. useQuery는 쿼리 함수와 옵션 객체를 받아 실행하고, 서버로부터 데이터를 가져오고 캐시에 저장합니다.
   
    useMutation 훅은 서버에 데이터를 수정하기 위해 사용됩니다. 이 훅은 비동기 작업을 수행하고 성공 또는 실패에 따라 적절한 로직을 처리할 수 있도록 해줍니다. useMutation은 뮤테이션 함수와 옵션 객체를 받아 실행하고, 서버에 데이터를 보내고 응답을 처리합니다.
   
   
2.  useQueryClient 훅은 현재 QueryClient 인스턴스에 액세스할 수 있게 해줍니다. 이를 통해 캐시된 데이터에 액세스하고 캐시를 수정하거나 삭제할 수 있습니다. 주로 useQueryClient는 useMutation에서 데이터를 수정한 후에 캐시를 업데이트하기 위해 사용됩니다.
   
   
3. useRecoilValue와 useSetRecoilState 훅의 차이점은 무엇인가요?
   
   Atom이나 Selector 값을 읽어올 때 useRecoilValue를 사용합니다. 해당 Atom 혹은 Selector의 현재 상태 값을 반환합니다. 그리고 useSetRecoilState는 react useState 와 유사하게 상태 값을 수정할 수 있게 해줍니다. 즉, useRecoilValue는 상태를 읽는 것만 가능하고, useSetRecoilState는 읽기와 쓰기를 모두 처리할 수 있는 것입니다. 
   
   이 두 가지 훅의 역할을 잘 구분해 사용하면, 코드의 의도 표현이 명확해져 가독성과 유지보수가 쉬워지고, 성능 최적화에도 도움을 줍니다.
   

 

1.  
2. React query와 Redux를 비교해서 설명해주세요.
3. 
   https://tech.kakaopay.com/post/react-query-1/#-api-%EC%9A%94%EC%B2%AD-%EC%88%98%ED%96%89%EC%9D%84-%EC%9C%84%ED%95%9C-%EA%B7%9C%EA%B2%A9%ED%99%94%EB%90%9C-%EB%B0%A9%EC%8B%9D-%EB%B6%80%EC%9E%AC
   
   사용 목적, 비동기 데이터 관리의 측면 등 다양한 부분에서 차이가 있지만 비동기 데이터 관리에 초점을 두고 차이를 비교해보도록 하겠습니다.
   
   React query는 비동기 데이터 요청 및 자동 캐싱과 리렌더링에 특화되어 있습니다. 주로 데이터 요청과 관련된 기능에 중점을 두었다는 것이 특징입니다. 반면 Redux는 중앙 집중화된 상태 관리 및 불변성에 중점을 두었습니다. 
   
   Redux에서는 기본원칙을 충족하지 위해 장황한 Boilerplate 코드가 요구됩니다.  redux-toolkit을 이용한다해도 많은 boilderplate 코드가 요구됩니다. 또한 하나의 API 요청을 처리하기 위해 여러 개의 Action과 Reducer가 필요하여 전체 코드가 눈에 잘 들어오지 않는 단점이 있습니다.
    그리고 Redux는  Redux는 API 통신 및 비동기 상태 관리를 위한 라이브러리가 아니고, 범용적으로 사용할 수 있는 전역 상태 관리 라이브러리이기 떄문에비동기 데이터를 관리하기 위해서는 관련된 코드를 하나부터 열까지 개발자가 결정하고 구현해야 한다는 단점이 있습니다. API 요청 수행을 위한 규격화된 방식이 부재되어있어서 불편함이 있습니다.
   
   React Query는 React Application에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트 하는 작업을 도와주는 라이브러리이기에 Redux를 사용한 API 요청과 비동기 데이터 관리에서의 불편함을 React query를 통해 해결할 수 있습니다.  React Application에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트 하는 작업을 도와주기에 boilerplate 코드를 감소시켜주는 효과가 있습니다. 또한 API 상태와 관련된 다양한 데이터를 제공하여 복잡한 구현과 설계 없이도 개발자가 효율적으로 화면을 구성할 수 있게끔 도와줍니다.
   redux는 비동기 데이터 관리를  할 때는 모두 직접 구현해야 하는데 react query는 자체적으로 제공하는 다양한 기능이 있어 사용자 경험 향상을 더욱 쉽게 할 수 있도록 도움을 줍니다.  예를 들어 단순한 옵션 부여만으로 Window Focus 이벤트 발생 시 서버 상태 동기화 시나리오를 달성할 수 있거나, 
   
   
   
4. Recoil에서 비동기로 데이터를 받아올 때 상태를 어떻게 관리할 것인지 설명해주세요.
   
   첫 번째로 useRecoilState를 사용하여 Recoil 상태를 비동기적으로 업데이트하고, 두 번째로는 useRecoilCallback을 사용하여 비동기 작업을 수행하고 그 결과를 Recoil 상태에 반영하는 방법입니다.
5.  

 

1.  
2. Recoil에서 atom과 selector를 어떻게 이용하는지 설명해 주세요.
3. 
   Atom과 Selector는 상태를 관리하는 데 사용되는 두 가지 주요 개념입니다.
   Atom은 Recoil에서 상태를 나타내는 기본 단위로, 여러 컴포넌트에 공유되어 읽기, 쓰기가 가능합니다.
   Selector는 Atom과 달리 파생된 데이터를 나타냅니다. 기존 Atom이 가진 상태를 기반으로 계산된 값을 나타내는 데 사용됩니다. Selector는 읽기 전용이므로 직접적으로 업데이트할 수 없고, 읽기만 가능합니다. 주로 계산된 상태를 사용하는 컴포넌트에서 Selector를 사용하여 상태를 계산하고 반환할 때 활용됩니다.
   
   
4. React Query로 받아온 데이터를 Recoil을 이용해 저장하는 방식은 효율적인가요?
   
   React Query는 데이터 요청을 관리하고 캐싱하는 데에 특화되어있고, Recoil은 React 애플리케이션에서 전역 상태를 관리하는 데 사용되므로 두 라이브러리를 함께 사용하는 것이 효율적이라고 생각합니다.
   
   데이터 요청 및 업데이트 로직은 데이터를 자동으로 캐싱해주는 React Query에게 맡기고, Recoil으로  해당 데이터를 관리하면 좋을 것 같습니다. 그리고 React Query에서 데이터가 갱신될 때 Recoil 상태를 업데이트하면, 이에 연결된 컴포넌트는 Recoil 상태의 변화를 감지하여 자동으로 리렌더링되게 만들어두면 효율적인 방식이 될 것이라 생각합니다.
5.  

1.  
2. React Query에서 데이터를 캐싱하고 필요할 때만 다시 불러오는 방법을 설명해주세요.
3. 
   staleTime 또는 cacheTime 옵션을 사용할 수 있습니다.
   staleTime 옵션은  데이터가 fresh 에서  stale 상태로 변경되는데 걸리는 시간을 지정합니다. (데이터가 만료되기 전까지 캐시된 데이터를 사용할 수 있는 시간) 이 옵션을 사용하면 데이터가 만료되기 전까지는 이전에 캐시된 데이터를 사용하고 지정한 시간이 지난 이후에 새로운 데이터를 요청합니다. fresh 상태일때는 쿼리 인스턴스가 새롭게 mount 되어도 네트워크 fetch가 일어나지 않는 것입니다. 
   
   cacheTime 옵션은 서버에서 받아온 데이터를 캐시하는 시간을 관리하고, 이 시간이 지나면 데이터가 가비지 콜렉터에 의해 삭제되도록 합니다. 이 옵션을 사용하면 캐시된 데이터가 일정 기간 동안만 유효하게 됩니다. cacheTime이 지나기 전에 쿼리 인스턴스가 다시 mount 되면, 데이터를 fetch하는 동안 캐시 데이터를 보여준다. 그리고 무조건 inactive 된 시점을 기준으로 캐시 데이터 삭제를 결정한다.
   
   즉, staleTime은 이전 데이터를 빠르게 제공하고 백그라운드에서 새로운 데이터를 가져오는 시간을 관리하고, cacheTime은 서버로의 추가 요청 없이 사용할 수 있는 캐시된 데이터의 유효기간을 관리하는 역할을 합니다.
   
4.  
5. Recoil를 활용해서 컴포넌트의 불필요한 재렌더링을 어떻게 최적화하면 좋을지 설명해주세요.
   
   Selector를 사용하면 파생된 데이터를 계산하고 이를 메모이제이션하여 불필요한 계산을 피할 수 있습니다. Selector는 읽기 전용이므로 컴포넌트에서 사용할 때마다 이전에 계산된 값을 반환하므로 성능을 향상시킬 수 있습니다.
   두 번째로 useRecoilCallback 훅을 사용하여 비동기 작업을 수행하고 Recoil 상태를 업데이트할 수 있습니다. 이를 통해 비동기 작업과 Recoil 상태 업데이트를 분리함으로써 불필요한 재렌더링을 방지할 수 있습니다.
6. 그리고 Recoil 상태를 읽어오는 컴포넌트에서는 해당 컴포넌트에서 실제로 필요한 Recoil 상태만 구독하도록 유의합니다. 불필요한 Recoil 상태를 구독하면 해당 상태가 변경될 때마다 컴포넌트가 재렌더링되므로, 필요한 상태만을 구독하여 최적화할 수 있습니다.
7.  

 

1. React Query의 라이프 사이클에는 어떤 상태들이 있는지 간략히 설명해주세요.
   
   fetching, fresh, stale, inactive, deleted 상태가 있습니다.
   그 중 active 상태의 쿼리는 fetching, fresh, stale 상태를 가질 수 있습니다.
   
   • fetching : 요청 중인 데이터
     
     
   • fresh : 새롭게 추가된 쿼리, 만료되지 않은 데이터
     • 컴포넌트 마운트, 업데이트되어도 재요청하지 않음
     • default staleTime : 0 으로 설정되어 있기 때문에 호출이 끝나면 바로 stale 상태로 변함
     • staleTime을 늘려줄 경우, fresh 상태가 유지되며, 쿼리가 다시 마운트되도 패칭이 발생하지 않고 기존의 fresh 값 반환
   • stale : 만료된 데이터
     • 데이터가 만료됐다고 판단하기 전까지 허용되는 시간 이 staleTime
     • 컴포넌트 마운트, 업데이트되면 데이터 재요청( staleTime이 지난 이후엔 리패칭 요청됨)
   • inactive : 비활성화된 데이터
     • active 쿼리가 하나도 없는 데이터
     • inactive된 이후, cacheTime 동안 캐시 데이터 유지
     • cacheTime 이후 가비지 컬렉터(GC)에 의해 제거
   • deleted : 가바지 컬렉터에 의해 처리된 데이터

     

     https://www.choi-hyunho.com/posts/React/react-query-4

1. recoil 내 selector의 get와 set 함수를 통해 반환하는 값에는 어떤 차이가 있나요?
2.  
   
   • get 함수는 현재 selector에서 의존하는 다른 Recoil 상태나 selector의 값을 읽어오는 데 사용됩니다.
   • get 함수는 순수 함수로, Recoil 상태의 값을 읽기만 하며 값을 변경할 수 없습니다.
   • get 함수가 반환하는 값은 selector의 현재 값이나 의존하는 다른 상태의 값이 됩니다
   • set 함수는 selector의 값을 업데이트하는 데 사용됩니다. 이 함수는 새로운 값을 받아서 selector의 값을 변경할 수 있습니다.
   • set 함수는 컴포넌트에서 Recoil 상태를 업데이트하기 위해 사용됩니다.
   • set 함수가 반환하는 값은 void 즉, 아무 값도 없습니다.

1. react-query사용 시 특정 상황에서만 데이터를 조회하고 싶을 때 어떤 hook을 사용해야할까요?
2. 
   **`react-query`**를 사용할 때 특정 상황에서만 데이터를 조회하고 싶다면, **`useQuery`** 훅의 옵션 중 **`enabled`** 옵션을 활용하면 됩니다. **`enabled`** 옵션을 **`false`**로 설정하면 쿼리가 자동으로 실행되지 않습니다. 그 후 원하는 시점에 **`enabled`**를 **`true`**로 변경하여 쿼리를 수행할 수 있습니다.
   
   
3. Redux와 Recoil의 저장 방식에서의 차이를 설명해주세요
4. 
   Redux에서는 중앙 집중식 저장소를 사용 하기 때문에 상태 데이터를 단일 객체 트리로 이루어진 단일 스토어(store) 안에 저장합니다. 그리고 불변성을 강조하기 때문에 상태를 직접 수정하는 대신에 새로운 상태 객체를 반환합니다. 스토어 안 상태는 reducer 함수에 의해 업데이트되고, 엄격한 규칙에 따라 상태의 변화를 예측할 수 있도록 하는 특징이 있습니다.
   
   반면, recoil은 atom과 selector 형태로 저장됩니다. Atom은 단일 값을 나타내고, selector는 atom또는 다른 selector로부터 파생된 값을 나타냅니다. Recoil 상태는 컴포넌트 범위에서 로컬하게 정의될 수 있고, 컴포넌트 간에 데이터 및 상태 공유가 편리합니다. 따라서 recoil은 redux에 비해 유연한 상태관리에 초점이 맞춰져 있습니다.