20231122 퇴근 전 TIL

- 게시글 형식의 페이지에서 검색 필터와 게시글 리스트를 구현해두었는데, 여기서 세세한 페이지 이동, 페이지네이션, 검색 필터 유지 등 세밀한 작업이 필요했다. 이때, 한 게시글을 조회했을 때 "목록" 버튼이 존재하는데, 목록 버튼을 통해 게시글 목록으로 되돌아간 경우 기존의 검색 필터, 페이지네이션을 유지해주고 싶었다. 

 

-> 기존의 코드는 목록 버튼을 눌렀을 때, 단순히 navigate만 해주어 경로만 바꿔주었고, 다른 동작들에서는 검색 필터와 결과 리스트 값을 초기화해주는것이 의도였기에 navigate 한 경우에도 함께 초기화 코드가 동작하였다. 

 

크게 3가지 경우로 나뉘었다.

- 목록 버튼을 클릭하여 게시글 목록으로 이동한 경우 -> 페이지네이션 및 검색 필터 값 유지

- 언어 탭 변경 시 -> 페이지네이션 및 검색 필터 값 초기화 (경로는 동일함)

- 검색 후, 다른 페이지로 이동했다가 해당 리스트로 재접속하는 경우 -> 페이지네이션 및 검색 필터 값 초기화 (경로 변경됨)

 

필터와 페이지네이션의 공통된 상위 컴포넌트에서 useEffect로 언어 탭 변경시와 첫 렌더링 시에는 초기화를 시켜주고 있었다. 그런데, "목록" 버튼 클릭이 일어났을 때에만 해당 초기화를 막는 분기점을 잡는것이 어려웠다. 

 

- 컴포넌트 마운트, 언마운트로 분기점을 잡아보려 했으나, 게시글 조회 페이지에서 수정, 삭제 등 다른 언마운트 동작이 일어나기에 적합하지 않았다. 

- 경로가 바뀐 경우를 분기점으로 잡아볼까 했으나, 언어 탭이 변경되는 경우는 경로에 변화가 없이 동일했다. 

 

따라서 최후의 수단으로 Recoil의 atomFamily를 이용하여 isListButtonClicked를 boolean 값으로 만들었다. 

(게시글 형식의 사이드바 메뉴가 3-4개 정도 만들어질 예정이라, 모든 경우에 "목록" 버튼 (컴포넌트화 되어있음)을 누른 경우 초기화를 막아주어야 해서 재사용 필요해 family로 생성)

 

-> isButtonClicked가 true인 경우,  useEffect 문에서 초기화 전에 return을 해주었다. 

 

이렇게 하니 케이스별로 의도한대로 동작하였다. 

사수분과 해당 코드에 대해 코드리뷰를 진행했는데, 받은 피드백이 도움이 많이 되어 기록한다!

 

1. 경로 변경 체크, 언마운트 분기 등 다른 방안을 모두 고민했으나 안되는 경우 전역상태 이용한 값으로 목록 버튼을 감지한 것은 잘했다. 이렇게 같은 동작을 구현하더라도 여러 방법을 고안해보는 훈련을 많이 하라.

2. "목록" 버튼이 있는 공통 컴포넌트 내에서 isListButtonClicked 값을 변경해주고 있는데, 이런 식으로 상태 값에 의존성을 갖는 것은 공통 컴포넌트 설계 시 좋지 않다. props로 외부에서 내려주는 형식으로 바꾸는 것을 추천한다. 

 

또한, 해당 코드로 커뮤니케이션하며 느낀 점

- 코드의 의도를 구두로 커뮤니케이션할 때에도 명확하게 설명할 수 있도록, 코드의 의도를 명확히 생각하며 구현하기

- PR에 더 많은 메세지를 담기? (어떤 동작을 의도했는지, 구현하며 어떤 방안들을 고려해보았으나 어떠한 이유로 해당 방법을 채택했는지 등...) -> 동료가 코드만 보고 파악하기 어려운 맥락을 첨부하는것이 좋은가?