[FE] State 관리

[hwanfront]

Global State 관리에 대해서 필요한 이유 예시) 로그인 관련 정보를 부모 컴포넌트 - 하위 컴포넌트 - 하위 컴포넌트 - ... 넘겨주기 귀찮음

1. 그냥 react에서 기본 제공하는 Context 를 쓴다 (지금 사용 중, 별다른 문제는 없지만 커질수록 관리가 귀찮아 질수도?)
2. 에러메시지가 뜨긴 하지만 나중에 더 복잡해질 수 있으니까 recoil 을 쓴다 (편함, react-query 랑 같이 쓰는 글이 꽤 있어서 써봤는데 이슈가 있음)
3. redux + redux-thunk 를 쓴다 (작성하기 귀찮음)
4. redux-toolkit 을 쓴다 (잘 모르는데 대충 redux + redux-thunk 를 작성하기 용이하게 만든듯?)

단, Redux 쓰려면 기존에 사용하던 react-query를 각각 redux-safa, rtk toolkit 으로 바꿔야 할수도? 이건 알아봐야함

[hwanfront]

recoil 도입 시 문제점

사실 편하기도 하고 비동기(api) 불러오는 데 사용되는 react-query 랑 많이 사용해서 추가해봤는데 이슈가 있어서 흠...

nextjs 는 SSR 렌더링, 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식 .

Expectation Violation: Duplicate atom key "userInfo". This is a FATAL ERROR in production. But it is safe to ignore this warning if it occurred because of hot module replacement.

해당 에러는 recoil 의 atom 또는 selector 라는 개념이 여러 번 호출되었을 때 뜨는 에러

원래 react 같은 경우에는 단일 SPA 로 atom 이 한 번 호출되는데 , hot reloading 될 때 파일 변경으로 인해 전체 파일이 다시 빌드되면 atom이 다시 호출되는 경우 저런 메시지가 출력 됨 이거와 관련되서 이슈가 열려있긴 하지만 딱히 고쳐질 것 같진 않을 것 같고, (1년 반 동안 open 상태) 아직까지는 에러메시지가 뜨더라도 멀쩡히 동작하긴 하는데 SSR 관련해서 비슷한 이슈가 있고, 차후에 문제가 될지 알 수 없음

• 에러 관련 next.js console warning recoil-issue-duplicate recoil-issue-ssr

• 나머지 nextjs-react-recoil-persist-values-in-local-storage-initial-page-load-in-wrong 상태 유지를 위한 recoil-persist 관련 structure

[hwanfront]

CONCENT

• Build-in dependency collection, a predictable、zero-cost-use、progressive、high performance's react develop framework
• 중국산 상태 관리 툴

redux

• 예측 가능한 상태 컨테이너, 적을 게 많음, 자유분방함 (레거시 코드가 쓸데없이 다양함)
• 미들웨어, 편하게 사용하기 위한 도구들을 따로 설치해야 함
• redux-thunk document : Redux 앱에서 비동기 로직을 ​​작성하기 위한 표준 접근 방식

redux-toolkit

• redux 로직 을 작성하는 표준 방식으로 만들어 진 패키지,
• 일반적인 문제를 해결하기 위해 만들어 짐
  • Redux 저장소 구성이 너무 복잡
  • 유용한 작업을 수행하려면 많은 패키지를 추가해야 함
  • 너무 많은 상용구 코드가 필요
• rtk-query : 강력한 데이터 가져오기 및 캐싱 도구
• redux-thunk 는 redux에서는 따로 설치해야 하는 middleware 이지만 redux-toolkit 에는 기본적으로 포함되어 있음
• 외에 immer 등 redux 작성하는 데 편리한 도구들을 기본적으로 포함하고 있다고 함

단, redux 나 redux-toolkit 으로 바꿀 경우, 기존 react-query 로 작성된 것도 rtk-query 나 redux-saga 로 바꾸는 게 맞을지도? 현재 react-query 로 작성된 부분이 그렇게 많지는 않을거임 아마도