더러운 if(조건)문 가독성 향상시키기 (feat.객체 사용) (Typescript)

개요

조건문은 조건이 많아질수록, 그 가독성이 저하될 수 있다. 본 블로그 글에서는 이러한 조건문을 보다 간결하고 일관된 방식으로 작성하는 한가지 방법에 대해 다뤄볼 예정이다.

기존의 코드

  let imageClass;
  if (type === "mainPage") {
    imageClass = styles.mainPageImage;
  } else if (type === "userPage") {
    imageClass = styles.userPageImage;
  } else if (type === "postPage") {
    imageClass = styles.postPageImage;
  } else if (type === "updateUserPage") {
    imageClass = styles.updateUserImage;
  } else if (type === "header") {
    imageClass = styles.headerImage;
  }

type이 변경됨에 따라, imageClass 변수에 여러 CSS 모듈 스타일이 저장되고 있는 상황이다. 이 imageClass 변수는 나중에 HTML 태그의 className 속성으로 할당될 예정이다. 여기서 문제는 조건이 다섯 가지나 되어 가독성이 떨어진다는 점이다. 이러한 상황에서, 객체 매핑을 활용하면 코드를 간결하게 만들면서도 일관성을 유지할 수 있다.

if-else 대신 객체 사용하기!!

  const imageClassMap: { [key: string]: string } = {
    mainPage: styles.mainPageImage,
    userPage: styles.userPageImage,
    postPage: styles.postPageImage,
    updateUserPage: styles.updateUserImage,
    header: styles.headerImage,
  };

  const imageClass = imageClassMap[type];

훨씬 더 간결해진 모습을 확인할 수 있다.

imageClassMap 객체:

imageClassMap은 이미지 클래스를 관리하는 객체이다. 이 객체는 { [key: string]: string } 형식(인덱스 시그니처)을 가지며, 문자열 키(key)와 문자열 값(string) 사이의 매핑을 나타낸다.

각 키(key)는 이미지 클래스를 대표하는 이름이며, 값(string)은 해당 이미지 클래스의 스타일을 지정하는 CSS Class이다.

mainPage 키에는 styles.mainPageImage라는 CSS Class가 매핑되어 있다는 의미이다.

imageClass 변수:

imageClass 변수는 Class를 선택하는 변수이다. type 변수에는 원하는 Class를 선택하기 위한 키(예: "mainPage", "userPage", "postPage" 등)가 저장되어 있어야 한다.

(실제 type은 props로 여러가지의 string 값을 상위 컴포넌트로부터 내려받는 상황이다.)

imageClass는 imageClassMap 객체를 사용하여 type 변수에 해당하는 Class를 동적으로 선택한다.

예를 들어, type의 값이 "mainPage"이라면, imageClass는 styles.mainPageImage로 설정되게 되는 것이다.

이점

가독성 향상: 이 코드를 사용하면 복잡한 if-else 조건문을 피하고, Class를 간결하게 선택할 수 있다.

유지보수 용이성: 새로운 이미지 Class가 추가되거나 기존 Class가 변경되어도, imageClassMap 객체만 업데이트하면 된다. 기존 코드를 수정하지 않아도 새로운 Class를 쉽게 관리할 수 있다.

인덱스 시그니처

imageClassMap 객체의 타입에 해당하는 인덱스 시그니처에 대해 좀 더 알아보자.

인덱스 시그니처는 객체의 속성에 접근하는 방법을 정의하는 TypeScript의 기능 중 하나이다. 일반적으로 객체의 속성은 고정된 이름을 가지고 있으며, 해당 이름을 사용하여 속성에 접근하게 된다.

하지만 때로는 본 블로그의 내용처럼 동적으로 속성에 접근해야 하는 상황이 발생할 수 있다. 이 때 인덱스 시그니처가 유용하게 사용된다.

기본 형식

{ [keyType]: valueType }

본 블로그에서의 형식

{ [key: string]: string }

key: string은 객체의 속성 key값이 문자열이어야 함을 의미한다.

이 경우,

"mainPage",
"userPage",
"postPage",

등과 같은 문자열이 key값이 되는 것이다.

value: string은 해당 속성의 value 값이 문자열임을 의미한다.

이 경우,

styles.mainPageImage,
styles.userPageImage,
styles.postPageImage

등과 같은 문자열이 value값이 되는 것이다.

이점

type 변수의 값이 imageClassMap 객체의 키와 일치하지 않으면 타입 오류가 발생한다. 이로 인해 런타임 오류를 방지하고 코드의 안정성을 높일 수 있다.