🔧 chore: zustand 라이브러리 설치

[rkdcodus]

✅ 체크리스트

• [x] 화면 깜박임 현상 오류 해결
• [x] 라우터에 suspense 제거로 인한 에러 임시 해결
• [x] zustand 설치

📝 작업 상세 내용

1️⃣ 화면 깜박임 문제

처음 페이지가 로드 될 때(혹은 새로고침 시) 페이지가 전체적으로 깜박이는 현상이 있었습니다. route에 적용했던 suspense의 문제가 아닐까 추측되어 테스트해본 결과, suspense가 원인임을 확인하였습니다.

예전에 suspense와 lazy 도입했던 이유

예전에 1차 개발이 마무리 될 때쯤 초기 렌더링 지연시간을 줄이고자 lazy loading 방식을 도입했었습니다.

react는 SPA이기때문에 한 번에 사용하지 않는 컴포넌트까지 불러오는 단점이 있습니다. lazy loading은 초기에 페이지가 로드될 때 필요하지 않은 컴포넌트를 로드하지 않고 사용자가 실제로 필요할 시점에 로드되도록 해줍니다. 사용자가 접근할 때 동적 import를 통해 동기적으로 로드되고 로드 완료 전까지의 로딩 과정에 suspense가 필요합니다. suspense는 아직 렌더링 준비가 되지 않은 컴포넌트가 있을 때 준비가 완료될 때까지 로딩화면을 보여주기 위해 사용합니다.

suspense가 깜박임 문제의 원인이 된 이유는 네트워크가 빠른 상태에서 로딩화면까지 순식간에 지나가버려 깜박거리는 것으로 보여지게 된 것입니다. 그리고 suspense를 페이지 컴포넌트 자체에 씌웠기 때문에 로딩화면이 페이지 컴포넌트 대신 그려져 전체 페이지가 깜박이게 되었던 것입니다.

그래서 도입했던 suspense와 lazy를 제거해주니 전페 페이지 깜박임 문제가 사라졌습니다. 하지만 서버에서 받아온 데이터들이 한번에 로드되지 않고 각자 따로 렌더링 되고 있습니다.

전

후

2️⃣ suspense 제거로 나타난 에러

suspense와 lazy 제거 후에 발생한 에러입니다.

A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition. 페이지 로드 시에 발생했는데 이 경우엔 React가 페이지의 일부 데이터를 비동기적으로 로드하는 동안 컴포넌트의 렌더링을 일시 중단(Suspense)하기 때문입니다.

확인 결과, useProfile 훅을 사용하는 컴포넌트들 때문에 해당 에러가 나타났고 에러가 나타나는 컴포넌트를 Senspense로 감싸 에러를 해결했습니다. (Setting 페이지 제외, Setting 페이지 새로고침 시 에러 발생함.) 아래 4군데의 컴포넌트에 적용해두었습니다.

• Header의 Profile 컴포넌트
• MyComponent의 ProfileSection, Profile 컴포넌트
• Setting 페이지의 Profile 컴포넌트

3️⃣ zustand 설치

recoil -> zustand 변경을 위해 라이브러리 설치했습니다.

zustand는 현재 적용되어 있는 recoil과 마찬가지로 상태 관리 라이브러리입니다. 현재 가장 많이 쓰이는 라이브러리는 redux > zustand > jotai > recoil 이라고 합니다. redux는 사용법이 꽤 복잡하고 패키지 용량이 큰 반면, zustand는 직관적인 사용법과 매우 적은 양의 코드로도 상태 관리가 가능합니다. recoil은 다른 라이브러리에 비해 업데이트가 잘 되지 않고 있다고 합니다.

🚨 버그 발생 이유 (선택 사항)

🔎 후속 작업 (선택 사항)

🤔 질문 사항 (선택 사항)

📚 참고 자료 (선택 사항)

Transition : 쉿, 이제 안전해 나의 작은 Suspense 상태 관리 라이브러리에 대한 고찰

📸 스크린샷 (선택 사항)

변경 사항에 대한 스크린샷이 있다면 첨부해주세요.

✅ 셀프 체크리스트

• [x] 브랜치 확인하기
• [x] 불필요한 코드가 들어가지 않았는지 재확인하기
• [x] issue 닫기
• [x] reiewers, assignees, Lables 등록 확인하기

이슈 번호: Close #161