아고라스테이츠 리팩토링1

이전 아고라스테이츠 과제 회고 당시 생각했던 수정사항 일부를 리팩토링했다.

크게 2부분을 건드렸는데,

• aside 모바일 삭제

• modal 통합

모바일 디스플레이용 어사이드 삭제

처음 프로젝트 완성 당시 어사이드 부분을 반응형으로 만들기 위해서 컴포넌트를 두개 만들었다. 구현 방식은 모바일 화면에서 모바일 어사이드 컴포넌트를 display: flex시키고 데스크탑용 컴포넌트를 display:none으로 서로 교체하는 방식을 했다.

사실 교체하는 것처럼 보이지만 내부에서는 두 컴포넌트 모두 불러온 상태였고, 클래스 변화로 렌더링만 바꾼 것이었다.

주석 처리한 부분이 모바일 어사이드다.

수정 방법은 간단했다. css에서 일반 어사이드 상태를 flex-direction: row-reverse를 시키고 원래 모바일 어사이드에 주었던 css 스타일을 넣어주기만 하면 성공이었다.

이렇게 하고 나니 필터와 태그의 순서는 바뀌었지만, 전체적인 틀은 변화가 없었고, 순서가 바뀐 것도 문제없다고 판단되어 여기서 수정을 종료했다.

모달 통합

모달 컴포넌트를 만들 때 각 모달창마다 컴포넌트를 만들어서 재사용이 가능한 부분을 빼내지 못하고 효율적이지 못한 코드를 작성했다. 이 부분을 수정하는 것이 이번 리팩토링의 목표였다.

하드코딩으로 작성된 탬플릿 부분을 수정하였고, 클릭 이벤트 핸들링을 수정했다.

탬플릿 수정

회원가입과 로그인, 디스커션 작성 모달은 형태가 같아서 탬플릿을 하나로 합치는 것이 쉬웠다. 인자로 contentBody에 들어가는 내용을 받아 map으로 순회하면서 추가하기만 하면 끝이었다.

위 방식으로 modal__container내부에 modal Content, button list가 있어야하는 경우에 사용할 수 있는 코드가 되었다.

하지만 디스커션 정보를 보여주는 모달의 경우는 단순히 contentBody만 있는 것이 아니었기 때문에 수정을 거쳐야했다.

위 사진이 원래 디스커션 모달에 들어가는 내용이다. 일반 모달은 contentBody를 map을 통해 넣어주지만, 여기에는 modal__discussionInfo가 하나 들어가있다.

내가 생각한 해결방법은 콘텐트 앞 뒤로 스테이트가 있으면 그것을 추가하는 방식을 사용했다.

결과

모달을 하나로 통합하고 모달 내부도 컴포넌트로 분리하는 방식으로 리팩토링을 진행하였다. 동작에는 문제가 없는 것을 확인했지만, 재사용 가능한 컴포넌트라고 물어본다면 답은 글쎄이다. 현재는 내가 원하는 모달을 띄우기 위해 컴포넌트를 하나로 통합한 것은 성공이지만, 만약 모달 내부의 틀도 동적으로 받는 경우로 한다면 더 재사용성이 높은 컴포넌트가 될 것이라고 생각한다.

위 사진은 현재 컴포넌트 파일들이다.