프로젝트를 만든 목적

• redux 사용 경험
• react와 ts 코드 작성 연습

주제 선정 이유

로토님 : ‘나는 상태 관리 라이브러리를 사용하지 않는다.’

상태 관리가 나온 이유

상태 : 동적으로 변하며 렌더링에 영향을 미치는 값

• props로 컴포넌트에 상태를 내려줄 때 여러 컴포넌트를 거쳐야 해서 불편
  • 같은 상태를 공유해야 하는 컴포넌트에 손쉽게 값 전달 가능
• 서버 데이터 캐싱을 통한 네트워크 자원 절약

사용하지 않는 이유

• UI state 측면
  • 컴포넌트 내 또는 주변에 위치하기 때문에 전역적 관리가 불필요
• 네트워크 비용 절감 측면

  • 서버에서 값을 가져오는 액션 dispatch를 강제하지 않으면 initialstate만 전달됨

  • 따라서 redux에 값이 있다는 걸 보장하기 위해서는 서버 데이터 fetch를 항상 해줘야 함

    ⇒ 목적에 위배

그럼 어떻게 해야 하나?

• fetchTransaction()로 메모리 캐싱
  • fetch된 값이 있음을 보장
  • out-of-date 문제
• SWR(stale-while-revalidate)
  • HTTP 요청이 1초 내에 반복적으로 발생할 경우, 캐시된 값을 별도의 검증없이 그대로 반환한다.
  • HTTP 요청이 1 ~ 60 초 사이에 반복적으로 발생할 경우, 캐시된 값은 이미 낡았지만(out-of-date) 캐싱된 값을 반환한다. 이와 동시에 백그라운드에서 향후 사용을 위해 캐시를 새로운 값으로 채우도록 재검증 요청이 이루어진다.
  • 60초 이후에 들어온 HTTP 요청에 대해선 다시 서버에 요청을 보낸다

결론

일반적인 애플리케이션은 전역 상태에서 관리할 필요x

코드 같이 보기

앞으로의 계획

• 기능 추가, 리팩토링