리액트의 상태 관리

리액트에서 어떤 걸 상태로 관리해야하는가? 일단 변화할 수 있는 값은 상태로 두어야 한다. 여기서 변화한다는 건, '유저의 어떤 동작에 따라서 변화' 할 수도 있지만, 그냥 내가 주기적으로 변화시키는 코드를 이야기할 수도 있다. 예를 들어, 어떤 컴포넌트에서 API를 이용해 데이터를 불러온다고 가정해보자. 최초에 컴포넌트가 렌더링 될 때는 데이터가 없었고, Fetch를 이용해 데이터를 불러올테니 이 경우는 상태다. 데이터를 불러오는 과정, 데이터를 불러오고 난 이후를 생각해보자. 데이터를 최초에 호출하고, API에서 데이터를 내려주기까지 지연 시간이 있을 것이다. 이 지연 시간은 유저의 환경에 따라 약간씩 다를 것이며, 어떤 때는 데이터를 불러오는 데 실패할 수도 있다. (타임아웃 등의 문제로) 그러면 상태에 몇가지를 추가해볼 수 있다. '데이터를 요청한 뒤 데이터가 내려오기 전까지' = 보편적으로 로딩이라고 부른다. '데이터가 성공적으로 내려왔을 때' = 보편적으로 데이터라고 부른다. '응답이 제대로 내려오지 않았을 때' = 보편적으로 에러라고 부른다. 그러면 데이터 하나를 불러오는 데에 3개의 상태가 생겼다. [로딩, 데이터, 에러] 거기에 추가하여, 만약 데이터를 불러오지 못했을 때 다시 시도할 것인 지, 시도한다면 몇 초마다 다시 요청할 것인 지, 타임아웃 에러가 났을 때에만 요청할 것인 지 등을 고려해볼 수 있다. 그러면 '최초 요청 후 몇 초가 지났는 지' 에 대한 정보가 필요할 수도 있다. 그러면 상태는 네가지가 된다. [로딩, 소요시간, 데이터, 에러] 이걸 모든 컴포넌트마다 넣어주면 코드가 너무 길어질테니, 이를 Custom Hook으로 만들어서 활용한다. 그리고 우리는 이미 그 친구를 안다. Tanstack Query는, React Query라고 많이 불리지만 isLoading, error, data 세가지 값을 훅으로 만들어 활용할 수 있게 하는 도구이다. SWR도 비슷한 형태의 도구인데, 다만 차이는 Tanstack Query는 쿼리 관리를 쿼리 클라이언트에서 하고, SWR은 개별 훅에서 처리한다. Tanstack Query는 훅을 사용할 때 retry 옵션을 추가하여 리트라이 주기 및 딜레이 시간을 정의할 수 있다. SWR은 errorRetryInterval, errorRetryCount, sholdRetryOnError 등의 옵션을 통해 리트라이 주기를 결정할 수 있다. (네트워크가 느리면 자동으로 10초로 설정한다고 한다) 이미 백엔드 서비스의 MSA가 성공적이라고 가정하고, 개별 컴포넌트 단위 관심사가 제대로 분리되어있다면, 개별 컴포넌트들이 완전히 독립적으로 움직이게 할 수 있다. 하지만 현실세계에서는 대부분의 경우 그렇지 않을 것이다.