Community

상세 페이지 -> 목록 페이지로 돌아오는 경우 목록 페이지에서 선택한 다양한 검색 조건들과 표의 페이지네이션 값들이 유지되는 것을 기대하게 되어요. 이를 위해서는 다양한 구현 방법이 있어요. 1.

상세 페이지 -> 목록 페이지로 돌아오는 경우 목록 페이지에서 선택한 다양한 검색 조건들과 표의 페이지네이션 값들이 유지되는 것을 기대하게 되어요. 이를 위해서는 다양한 구현 방법이 있어요. 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 에 특정 값이 노출되어도 보안 이슈가 없는지 확인이 필요합니다.

알림

알림이 없습니다