조금조금 - ServerState 와 ClientState
리액트를 들어가면 데이터를 처리하는 방법에 대해서 공부하게 된다. 그렇다면 리액트에서 상태란 무엇일까?
01) 리액트와 상태
리액트에서는 상태를 관리하는 이유는 애플리케이션의 UI 상태를 관리하기하기 위함이다. 상태에 따라서 조건부 렌더링을 할 수 있고, 화면에 데이터를 뿌릴 수 있다.
02) 리액트의 단방향 데이터 흐름
그러나 리액트는 단방향으로 데이터를 주고받을 수 있는 체계에서 형성된 JS라이브러리이다. 이를 통해서 하나의 데이터를 여러 컴포넌트에서 공유한다면, 가장 일반적인 방법으로 부모컴포넌트에서 자녀컴포넌트로 상태를 props를 통해서 내려주는 방법이다.
그러나 극단적으로 하나의 상태를 사용해야 하는 부모와 자녀간의 관계가 멀어질 수록 끝없이 상태를 props를 통해서 내려줘야 한다는 부분에서 props Drilling에 빠질 수 있다.
03) props Drilling 해결하기
리액트에서 자체적으로 제공하는 상태관리 체계에는 useContext()를 통해서 가능하다. 그러나 이 역시도 하나의 부모 컴포넌트와 자녀 컴포넌트들 사이에서만 상태를 주고받을 수 있는 한계를 가진다.
그러기에 등장한 상태 관리 시스템이 Redux 이다. 이는 중앙 상태 관리라는 이름을 통해서 하나의 상태를 어떠한 컴포넌트에서든지 공유가 가능하다. 그러나 Redux의 단점은 획일적인 코드체계가 없다는 점이 문제이다. 이를 해결하기 위해서 등장한 개념이 boilerplate이다.
- 액션 생성자
- 리듀서
- 스토어 설정 등
boilerplate는 위의 구조를 미리 정해놓은 템플릿을 통해서 코드를 정리한다. 이와 함께 등장한 개념이 redux-toolkit이다. Redux를 업데이트한 도구툴이라고 생각하면 된다.
04) ClientState
위와 같은 체계를 통해서 리액트 내, 즉 클라이언트에서 상태를 관리하는 것을 clientState라고 부른다.
장점
클라이언트 내에 데이터를 가지고 있기에 빠른 상태 전환이 가능하고, 이런 속도를 기반으로 UI를 빠르게 업데이트 할 수 있다는 것과, 서버와의 통신이 필요하지 않기에 서버 부하를 줄일 수 있다는 특징을 가진다.
단점
최근의 리액트는 함수를 기반으로 한 컴포넌트를 구성한다. 즉 함수라는 특징은 새로고침을 하면 변경된 데이터를 상실하게 된다는 점이다.
05) ServerState
이러한 한계와 더불어서 데이터의 연속적 측면에서 클라이언트는 서버와 통신하며 업데이트된 데이터를 유지하게 된다. 이 과정에서 비동기 통신을 통해서 서버와 통신을 하게 된다.
장점
상태를 서버에서 관리하기 때문에 브라우저가 새로고침되어도 변경된 상태를 안전하게 관리할 수 있다는 점이고, 서버와의 통신을 통해서 최신의 상태를 쉽게 유지할 수 있다는 점이 ServerState가 가지는 이점이다.
단점
그러나 단점은 서버와의 통신이 필요하기 때문에, UI가 업데이트 되어야 한다면 다소 시간이 걸릴 수 있다는 점이며, server에 의존한다는 점에서 서버 부하가 clientState에 비해서 높을 수 있다는 점이다.
06) ServerState와 React-Query
React-Query는 ServerState에 최적화 된 라이브러리이다.
공식문서에 따르면, "React Query는 React 애플리케이션에서 데이터 가져오기와 관리를 쉽게 해주는 라이브러리입니다. 이 라이브러리는 높은 성능, 탄력성, 선언적인 API 등의 이점을 제공"한다.
공식문서는 React-Query가 출현한 동기에 대해서 "상태 관리 라이브러리를 사용하여 애플리케이션 전체에서 비동기 데이터를 저장하고 제공하는 방식"을 이전의 방법보다 효율적으로 관리하기 위해서라며 자신을 소개하고 있다.
React-Query와 데이터 캐싱
React-Query는 서버로부터 데이터를 패칭(fetching)하여 캐시에 저장한다. 그리고 이렇게 저장된 데이터를 캐싱(Caching)하여, 불러온 데이터를 애플리케이션 내에서 사용하는 것이 React-Query의 대표적인 특징이다.
(1) 불필요한 네트워트 트래픽 감소
데이터가 캐시에 패칭되고, 캐싱된다는 것은 애플리케이션 성능에 막대한 이점을 가져다 준다. 이는 브라우저가 새로고침을 하거나 페이지를 이동할 때마다 다시 데이터를 가져올 필요가 없어지기 때문에, 불필요한 네트워트 트래픽을 줄일 수 있다는 점이다.
(2) 주기적인 데이터 업데이트
또한 React-Query가 가지는 이점은 별도의 처리를 하지 않더라도 백그라운드에서 주기적으로 데이터를 업데이트한다는 점이다. 기본적인 설정은 5분이지만 이 시간을 사용자의 요구에 따라서 더 빠르게 설정할 수도 있고, 느리게 할 수도 있다.
staleTime: 1 * 60 * 1000 // 1분 (단위: 밀리초)useQuery의 config 가운데, staleTime이 바로 그것이다. 이를 통해서 ms 단위의 시간을 통해서 조정할 수 있다.
또한 React-Query는 기본값으로 다른 프로그램으로 마우스를 이동했다가 오면, 자동적으로 데이터의 최신을 위해서 요청을 가한다. 이러한 기본설정을 사용하지 않으려면 다음과 같은 config를 통해서 제어할 수 있다.
refetchOnWindowFocus: false,또한 React-Query는 서버요청이 실패하면는 기본설정으로 3번에 걸쳐서 재요청을 가한다. 이러한 기본설정을 변경하기 위해서는 다음과 같은 config를 통헤서 제어할 수 있다.
retry: 3,
retryDelay: 1000,요청은 최대 3번까지 가능하며, 요청의 간격 또한 설정할 수 있다.
React-Query과 invalidateQueries
또한 React-Query가 주는 이점은 POST,PATCH를 통해서 서버의 데이터를 변경했을 때이다. 추가, 수정, 삭제는 서버의 데이터를 변경했다는 것을 의미한다. 그렇다면 현재 UI에 그려져 있는 내용이 변해야 한다는 것을 말한다. 이를 Redux에서 표현하는 것은 상당히 많은 코드를 요청하는 작업이었다.
React-Query에서 제공하는 invalidateQueries는 React-Query의 핵심 기능 가운데 하나다. useMutation(추가, 수정, 삭제)가 실행되었을 때, 해당 로직 안에서 쉽고 빠르게 변경된 데이터를 패칭할 수 있기 때문이다.
이러한 이점에서 React-Query는 현재 인기를 얻고 있는 상황이다.
