1. 객체로 컴포넌트 활용하기

React를 사용하여 프로젝트를 진행하면서 많은 고민이 되는 부분 중에 하나는 바로 어떤 값을 state 로 설정하여야 하는지에 대한 고민일 것이다. 만약 한 페이지 내에서 사용하는 모달창이 5개가 있고 이를 boolean 값을 통해 관리한다면 5개의 비슷한 state 가지고 있어야한다. 이는 매우 낭비라는 생각이 들었기 때문에 이를 개선해보고 싶었다.

어떤 방법이 좋을까?

먼저, 어떤 값을 이용하면 5개의 상태값을 하나로 줄일 수 있을 지 고민했다. 이는 간단했는데, 바로 boolean 값이 아닌 설명하는 내용을 통해서 관리하면 되는 문제였다.

예를 들어 삭제 관련된 Modal 의 경우에는 delete 등의 이름을 부여했다. 그렇다면 이제 삼항연산자 등을 이용해서 이름에 맞는 Modal 이 뜨도록 하면 된다. 하지만, 문제는 Modal 이 2개가 아닌 여러 개라는 점이었다.

Switch 문 대신 객체 사용

각 케이스마다 해당하는 로직이 구현되도록 하는 방법으로는 switch 문이 있다. 하지만, switch 문의 경우에는 변수에 할당할 수 없기 때문에 이를 JSX 내에 사용하지 않는다. 그렇기 때문에 다른 방법이 필요한데, 이 때 객체를 사용할 수 있다.

 const MODAL = {
    delete: (
      <DeleteModal
        id={openModal.id}
        handleCancel={handleCancel}
        updateComment={updateComment}
      />
    ),
    put: (
      <ToMyBooksModal
        handleCancel={handleCancel}
        handleMakeButton={handleMakeButton}
        libraryList={libraryList}
        handleLibrary={handleLibrary}
        onPutBook={onPutBook}
      />
    ),
    make: (
      <LibraryModal
        handleCancel={handleCancel}
        handleLibraryName={handleLibraryName}
        libraryName={libraryName}
        addLibrary={addLibrary}
      />
    ),
  };

위는 Modal 을 한 번에 가지고 있는 객체인 MODAL 이다. 이를 통해서 각 상태값이 키값으로 들어올 때 원하는 Modal 를 불러올 것을 예상할 수 있다.

 <Potal>
   <ModalLayout>{MODAL[openModal.type]}</ModalLayout>
 </Potal>

위의 코드처럼 사용하면 Potal 을 통해서 외부 DOM에 렌더링 하면서 이전에 작성한 <ModalLayout> 의 children 으로 Modal 이 들어가도록 할 수 있다. 반복을 줄일 수 있고 코드로 훨씬 간결해 진 것을 알 수 있다.