[Solo Project] 재사용성을 고려한 설계

☮ 부트캠프의 도움으로 수진님의 코드리뷰를 받을 수 있었다.

 

서점에서 단숨에 배우는 타입스크립트라는 책의 표지와..두께에 이끌려 열심히 서서 읽었던 기억이 있습니다.

처음 TypeScript에 입문하고 있었던 시기였는데 타입스크립트 핸드북의 번역상태가 좋지 않아

좀 더 이해가 잘 되는 레퍼런스를 찾던 중 발견한 책이었습니다.

물론.. 다 읽지는 못했지만 굉장히 좋은 책이라는 생각을 했었는데 바로 그책을 번역하셨던 분이시더라고요..

 

이런분께 코드리뷰를 받을 수 있는 기회를 놓칠 수 없어서 코드리뷰를 요청드렸는데

너무 유익한 코드리뷰를 받아서 포스트로 남겨두고자 글을 작성하고 있습니다.

 

const Modal = () => {
  const isModalOpen = useSelector((state: RootState) => state.modal.isOpen);

{isModalOpen &&
        createPortal(
          <>
            <BackDrop />
            <ModalImage />
          </>,
          portalElement,
        )}

처음 제 코드는 다음과 같은 형식으로 작성되어 있었습니다.

리덕스로 정의한 isOpen 스테이트를 가져와서

isOpen이 만약 true이면 모달을 보여주고 아니면 모달을 보여주지 않는 코드를 작성했습니다.

 

이렇게 작성한 이유는 다음과 같습니다.

1. 어차피 모달을 이번 프로젝트에서 재사용하지 않을거니까.

2. 모달을 유의미하게 재사용하려면 어떻게 해야할지 모르겠다.

 

두가지 이유였는데 수진님의 답변을 보고 나니 재사용성을 고려하기위해서는

추상화를 잘 할 수 있어야한다는 생각이 들었습니다.

예컨대 모달이라는 것은 무엇일까요?

저는 현재 진행하고 있는 프로젝트에서 수행하는 모달의 역할을 세세하게 생각하면서

 

모달은

1. 북마크 프로퍼티를 가지고 있어야한다.

2. 모달은 클릭된 아이템의 아이디와 객체에 대한 정보를 갖고있어야한다.

3. 모달은 클릭하거나 ESC를 누르면 닫을 수 있어야 한다.

4. 모달은 항상 화면의 정중앙에 위치해야한다.

와 같은 생각을 하고 있었는데

 

모달 컴포넌트 자체가 모달로서 수행해야할 기능은 모달창을 열고 닫고하는 것이더라고요

제가 고려했던 대부분의 부분들은 사실 Modal이 수행해야할 일이 아니었습니다.

 

뷰에 대한 부분이나 북마크로직들은 모달컴포넌트 안에 들어갈 컴포넌트에서 수행하고

모달 컴포넌트는 모달의 기능만 수행해주면 되는거죠!

 

따라서 코드를 리팩토링하게되었습니다.

 

다만 id만 넘겨주어도 된다는 것은 인지했지만

id를 넘겨주기 위해 코드를 수정하는 것보다 그냥 api 객체 째로 넘겨주는것이

수고가 덜할 것 같아 api 객체 째로 넘겨주는 방식을 택했습니다.

 

혹시 이 방식이 메모리적으로 손해가 있을지는 예상이 잘 안되지만..

아무튼 그런 이유로 리팩토링을 하게되었습니다.