[ project2 / zustand ] '더보기'가 계속 10개만 보여준다?(feat.STAR)

총 50개의 데이터를 가져오는데, 한번에 다 나열하는 것에서 10개씩 보여주는 방식으로 바꿨다. 그런데 상세 페이지를 들렸다가 목록 페이지로 돌아오면 다시 10개만 보여주는 것이다. 즉 useState Hook이 reset되는 현상

내용요약

최초 10개만 보여주는 결과 목록 페이지를 component가 reset되도 그대로인 상태를 유지함으로써, 사용자 사용성 번거로움을 최소화

 

 

 

데모 사이트 체험해 보기

 

zustand

STAR

1. Situation

- component reset 현상으로 목록 페이지로 돌아왔을 시, 결과목록 페이지의 보여지는 개수가 초기화

 

2. Task

- Component가 reset되도 값이 그대로 유지

 

3. Action

- 고려해 본 사항 1) 전역으로 변수 이동 2) Browser storage에 저장.

가) 전역 (Zustand vs redux vs Local Storage)

단순히 숫자가 기억과 증가만 존재하기 때문에 redux와 같이 큰 store이 필요 없다 판단 =>  zustand

Action function이 있으니 한번에 증가까지 해결가능 하기에 local storage보다 편리 => zustand

 

4. result

- 페이지가 reset되어도 그래도 숫자값을 가지고 있음.