- 문제: 메인 페이지에서 필터를 적용한 모임 리스트 조회 기능을 개발하면서 발생한 문제
- 아래의 조건들을 만족할 수 있는 필터 기능을 개발하면서, 필터 상태 관리에 어려움이 있었다.
- 각 필터에서 유저가 원하는 항목을 선택해 적용할 수 있다. (지역 필터 - 서울 강남구 )
- 적용한 필터에 해당하는 데이터를 서버로부터 다시 받아온다.
- 각 필터 모달에서 유저가 원하는 항목을 선택하고, 적용하기 버튼 클릭 시 필터가 적용된다.
- 적용하기 버튼을 클릭하지 않는다면, 선택한 항목은 적용되지 않는다.
- 페이지를 전환하거나, 창을 닫은 후 재접속했을 때 적용한 필터를 유지한다.
- 유저가 필터 모달에서 항목 선택 후 적용 버튼을 클릭하지 않은 상황에서, 의도하지 않게 서버로부터 데이터를 다시 받아오고, 메인페이지 리렌더링 발생
- 페이지 전환 또는 브라우저 창을 닫은 후 재접속 시 기존 선택한 필터가 초기화되는 문제
- 원인
- 의도하지 않은 데이터 페칭 및 리렌더링: 필터의 상태를 하나로 관리했기 때문에 항목 선택 시, 유저가 필터 적용 버튼을 클릭하지 않았음에도 필터 상태가 변경되는 문제를 확인
- 필터 초기화: useState로 상태 관리를 했기 때문에 페이지 컴포넌트 언마운트 시 필터가 초기화되는 부분 확인
- 해결방안
- 각 필터 모달에서 선택한 항목을 관리하는 selectedItems와 유저가 최종적으로 적용하기 버튼을 눌렀을 때의 항목인 filters로 필터 관련 상태를 분리: 메인페이지에서는 filters에 의해서만 서버로부터 모임 목록을 재조회해 의도하지 않은 결과를 막을 수 있다.
- filters 상태 관리 :
- 전역 상태로 관리- 페이지 전환 시 상태를 유지할 수 있으나, 새로고침 또는 브라우저 창을 닫을 경우 상태가 초기화되는 문제가 발생해 별도의 조치 필요, 리덕스와 같은 별도 라이브러리 사용 시 관련 코드의 증가
- 로컬 스토리지로 관리- 위의 문제를 모두 해결 가능, 필터 상태의 경우 로컬스토리지에 저장해도 크게 문제되지 않는 데이터로 판단해, 로컬스토리지와 useState를 조합해 사용하는 방법으로 문제 해결
발표용 정리
- 문제
- 유저가 필터 모달에서 항목 선택 후 적용 버튼을 클릭하지 않은 상황에서, 의도하지 않게 서버로부터 데이터를 다시 받아오고, 메인페이지 리렌더링 발생
- 원인
- useState로 상태 관리를 했기 때문에 페이지 컴포넌트 언마운트 시 필터가 초기화되는 부분 확인
- 대안: 전역 상태로 관리- 페이지 전환 시 상태를 유지할 수 있으나, 새로고침 또는 브라우저 창을 닫을 경우 상태가 초기화되는 문제가 발생
- 해결방안