상세 페이지 -> 목록 페이지로 돌아오는 경우
목록 페이지에서 선택한 다양한 검색 조건들과
표의 페이지네이션 값들이 유지되는 것을 기대하게 되어요.
이를 위해서는 다양한 구현 방법이 있어요.
1. React Router의 state 값 사용
장점
- URL을 깔끔하게 유지할 수 있습니다.
- 페이지 새로고침 시에도 상태가 유지됩니다.
- 브라우저의 뒤로 가기/앞으로 가기 기능과 잘 동작합니다.
단점
- 직접 URL을 공유할 때 페이지 정보가 손실될 수 있습니다.
- 복잡한 상태 관리가 필요한 경우 적합하지 않을 수 있습니다.
2. 전역 상태 값 사용
장점
- 애플리케이션 전체에서 상태를 쉽게 공유하고 관리할 수 있습니다.
- 컴포넌트 간 props drilling을 피할 수 있습니다.
단점
- 페이지 새로고침 시 상태가 초기화됩니다 (추가 설정 필요).
- URL에 페이지 정보가 반영되지 않아 공유가 어려울 수 있습니다.
- 간단한 기능에 비해 과도한 설정일 수 있습니다.
3. URL params 사용
장점
- URL을 통해 직접 페이지를 공유할 수 있습니다.
- 페이지 새로고침 시에도 상태가 유지됩니다.
- SEO에 유리할 수 있습니다.
단점
- URL이 복잡해질 수 있습니다.
- 여러 페이지네이션 파라미터가 필요한 경우 URL이 길어질 수 있습니다.
저는 아래 이유들로 인해 URL params 를 사용하기로 결정했어요.
- 사용자 경험: URL을 통해 직접 특정 페이지에 접근하거나 공유할 수 있어 사용자 경험이 향상됩니다.
- 상태 유지: 페이지 새로고침 시에도 현재 페이지 상태가 유지됩니다.
- SEO 친화적: 검색 엔진이 각 페이지를 개별 콘텐츠로 인식할 수 있어 SEO에 도움이 됩니다.
- 구현 용이성: React Router와 함께 사용하기 쉽고, 추가적인 상태 관리 설정이 필요 없습니다.
- 브라우저 호환성: 뒤로 가기/앞으로 가기 기능이 자연스럽게 작동합니다.
추가적으로 URL 에 특정 값이 노출되어도 보안 이슈가 없는지 확인이 필요합니다.
다음 내용이 궁금하다면?
이미 회원이신가요?
2024년 8월 6일 오전 10:12
기존 1, 2 번만 사용중이였다가 3번내용을보니까 새로고침시 휘발되는 문제를 로컬에 저장했었는대 파람에 써봐야겠네요