Quiz - Flux, React-Query, 상태 관리
1. Flux 패턴에 대해 알고 계신가요?
- flux 패턴은 단방향 데이터 흐름으로 애플리케이션을 만드는 아키텍쳐입니다. 먼저 사용자 입력을 기반으로 Action을 만들고 Dispatcher에 전달합니다. Dispatcher에서 Action에 대한 dispatch를 실행하여 Store의 데이터를 변경한 뒤 View에 반영합니다. 이러한 방식으로 데이터가 흐릅니다.
1.1 MVVM 패턴과 flux 패턴의 차이점에 대해 설명해주세요.
- MVVM은 데이터 바인딩을 사용하여 View와 ViewModel 간에 양방향 데이터 흐름을 유지합니다. 반면에 Fluxsms 단방향 데이터 흐름을 사용하여 Action -> Dispatcher -> Store -> View의 방향으로 데이터가 흐릅니다.
- Flux는 단방향 데이터 흐름과 단일 책임 원칙을 따르므로 테스트하기 쉬운 코드를 작성하기 쉽지만, MVVM은 View와 ViewModel 간의 양방향 데이터 바인딩 때문에 테스트하기 어려울 수 있습니다.
- MVVM은 Angular, Vue.js 등의 프레임워크에서 사용되며, Flux는 React에서 주로 사용됩니다.
2. React-Query를 사용해보셨나요?
- 네, React-Query를 사용하여 서버 상태를 관리했습니다. React-Query를 사용한 이유는 예전에는 Post 요청을 통해 변경된 데이터 상태를 화면에 보여주기 위해 새로고침을 해주어야 했는데, React-Query를 사용하면 클라이언트와 서버의 상태를 동기화시킬 수 있기때문입니다.
2.1 React-Query의 장점을 얘기해주세요.
- 캐시를 사용하여 동일 데이터 요청을 줄여서 서버의 부하를 줄일 수 있습니다.
- stale time을 지정하여 서버와 클라이언트의 데이터를 동기화할 수 있습니다.
- React hook과 구조가 비슷하므로 이해하기 쉽습니다.
3. 클라이언트 상태 관리를 어떻게 관리해보셨나요?
- 기본적으로 컴포넌트에서 필요한 상태를 갖고 있도록 구현했습니다.
- 상태를 공유할 경우 공통 부모 컴포넌트에서 상태를 props로 내려주었습니다. 공통 부모 컴포넌트와 상태가 필요한 자식 컴포넌트 사이의 깊이가 2 이상일 경우 context API를 사용하여 상태를 공유했습니다.
- 전역 상태의 경우 recoil 라이브러리의 atom으로 선언했습니다.
3.1 recoil을 사용하신 이유에 대해 설명해주세요.
- recoil을 사용하기 위해 필요한 보일러 플레이트가 없어서 설치하기가 비교적 가볍습니다.
- atom에서 selector로의 단순한 데이터 흐름을 가지고 있어서 이해하기 쉽습니다.
- 추가적인 미들웨어 사용 없이 selector를 사용하여 비동기 로직을 구현할 수 있습니다.
참고
