UX
-
[React] 상태 관리를 통한 사용자 경험 개선 (페이지 전환)React 2024. 2. 6. 23:20
next.js로 프로젝트를 진행하면서 리스트에서 어떤 아이템을 클릭하면 해당하는 아이템의 상세 페이지로 이동하는 기능을 구현하였습니다. 이때 상세페이지로 첫 진입 시 next.js서버에서 데이터를 불러온 후 페이지로 이동되면서 아이템을 클릭하면 즉각적으로 페이지로 이동되는 것이 아닌 아래 이미지와 같이 딜레이가 생기는 현상이 있었습니다. 클릭하면 즉각적인 반응이 없기 때문에 클릭된 건지 안된 건지 헷갈리기도 하고 마치 렉이 걸린 듯하여 사용자 경험이 매우 떨어진다고 생각해 이를 개선하고자 했습니다. | 전역 상태 관리 store생성 먼저 아이템을 클릭했을 때 클릭했다는 상태를 저장하기 위해 전역에 상태를 저장해 줍니다. 해당 프로젝트에서는 zustand라는 라이브러리 사용하였습니다. // useLoadi..