Object Literals와 data-driven rendering을 이용한 코드 개선기

코딩감자·2025년 1월 19일

Smilegate Dev Camp

목록 보기

4/5

🤔 글을 쓰게 된 계기

: Sidebar UI를 만들면서 코드가 점점 복잡해지는 것을 느꼈고, 이를 더 깔끔하고 효율적으로 개선할 방법을 고민했습니다. 공부하며 배운 내용을 정리한 글로, 조건문 개선과 데이터 기반 렌더링을 활용한 코드 최적화 방법을 공유하고자 합니다.

1. 객체리터럴(Object Literal)을 이용한 조건문 개선

: JavaScript에서 조건문은 매우 자주 사용되는 구문입니다. 이번 프로젝트에서는 채팅(Chat), 동영상 리스트(Playlist), 보이스챗(VoiceChat), 멤버 목록(Member) 등 다양한 항목을 가진 Sidebar를 구현해야 했습니다. Sidebar에서 선택된 메뉴에 따라 적절한 내용을 보여주기 위해 조건문을 사용했지만, 조건이 4개 이상으로 늘어나면서 코드가 점점 복잡해졌습니다.

아래에서는 대표적인 조건문 작성 방식인 삼항 연산자와 switch 문을 비교하고, 객체 리터럴을 활용한 개선 방법을 소개합니다

1.1 삼항연산자

: 삼항 연산자는 단순한 조건문을 처리하기에 적합한 도구로, 코드 내에서 조건에 따라 값을 반환할 수 있습니다. 하지만 조건이 여러 개일 경우, 삼항 연산자는 가독성을 떨어뜨리고 코드가 지나치게 복잡해질 수 있습니다.

const renderContent = () => (
  interfaceType === SidebarType.Chat ? <Chat /> :
  interfaceType === SidebarType.Playlist ? <Playlist /> :
  interfaceType === SidebarType.VoiceChat ? <VoiceChat /> :
  interfaceType === SidebarType.Member ? <MemberList /> :
  null
);

위와 같이 조건이 많아질수록 가독성이 떨어지고 유지보수가 힘들어집니다.

1.2 switch문

: 삼항 연산자나 if문의 대안으로 가장 먼저 떠올린 방법이 switch문입니다. switch 문을 사용하면 조건별로 분기 처리가 명확해지고, 코드 가독성이 좋아집니다.

const renderContent = () => {
  switch (interfaceType) {
    case SidebarType.Chat:
      return <Chat />;
    case SidebarType.Playlist:
      return <Playlist />;
    case SidebarType.VoiceChat:
      return <VoiceChat />;
    case SidebarType.Member:
      return <MemberList />;
    default:
      return null;
  }
};

1.3 객체리터럴

: 최근에 읽은 글인 Don’t Use If-Else and Switch in JavaScript, Use Object Literals에서, 객체 리터럴을 활용한 조건문 대체 방법을 알게 되었습니다.

1.3.1 객체리터럴을 쓰는 이유

1. 가독성 향상

if else나 switch문의 경우 코드가 길어질수록 복잡하고 읽기가 어렵습니다
객체리터럴은 key-value 매핑을 통해 조건과 결과를 명확히 보여줄 수 있어 가독성이 크게 향상됩니다.

2. 유지보수가 쉽다

새로운 조건이 추가되면 key-value쌍만 추가하면 되기 때문에 관리가 쉽습니다

3. 성능 개선

if else나 switch문의 경우 순차적으로 평가하여 O(n)인 반면, 객체리터럴은 key를 기반으로 직접 접근하기 때문에 시간 복잡도가 O(1)입니다.

1.3.2 코드

  const renderContent = {
    [SidebarType.Chat]: <Chat />,
    [SidebarType.Playlist]: <Playlist />,
    [SidebarType.VoiceChat]: <VoiceChat />,
    [SidebarType.Member]: <Member />,
  };

2. 데이터 기반 렌더링(Data-Driven Rendering)을 통한 코드 간결화

2.1 데이터 기반 렌더링이란?

: 데이터 기반 렌더링은 하드코딩된 요소 대신, 데이터를 배열이나 객체 형태로 정의하고 이를 활용해 동적으로 UI를 렌더링하는 방식입니다. 이는 반복되는 UI패턴에서 효과적입니다.

2.2 데이터 기반 렌더링을 사용하지 않을때의 코드

: 데이터 기반 렌더링을 사용하지 않으면 아래와 같이 각 버튼에 대해서 개별적으로 onClick와 img태그를 반복적으로 작성해야합니다

<Nav>
  <NavButton
    onClick={() => setInterfaceType(SidebarType.Chat)}
    active={interfaceType === SidebarType.Chat}
  >
    <img src={SidebarChat} alt="Chat" />
  </NavButton>
  <NavButton
    onClick={() => setInterfaceType(SidebarType.Playlist)}
    active={interfaceType === SidebarType.Playlist}
  >
    <img src={SidebarPlaylist} alt="Playlist" />
  </NavButton>
  <NavButton
    onClick={() => setInterfaceType(SidebarType.VoiceChat)}
    active={interfaceType === SidebarType.VoiceChat}
  >
    <img src={SidebarVoicechat} alt="VoiceChat" />
  </NavButton>
  <NavButton
    onClick={() => setInterfaceType(SidebarType.Member)}
    active={interfaceType === SidebarType.Member}
  >
    <img src={SidebarMember} alt="Member" />
  </NavButton>
</Nav>

단점

코드의 중복이 발생

NavButton과 onClick 속성, img 태그 등이 반복 작성해야 합니다
버튼 개수가 많아질수록 중복되는 코드가 많아지고 가독성은 낮아지며 유지보수는 어려워집니다.

확장성 부족

새로운 버튼을 추가하기 위해서는 같은 코드를 또 작성해야합니다

동적 작업 처리 불가능

확장성 부족의 측면은 동적 작업 처리 불가능으로 이러지는데, 만약 데이터 배열을 외부 API로 받아온다면 정해져있지 않은 개수의 데이터에 대해 대응이 어렵습니다.

2.3 데이터 기반 렌더링을 적용한 코드

const navButtons = [
  { type: SidebarType.Chat, icon: SidebarChat },
  { type: SidebarType.Playlist, icon: SidebarPlaylist },
  { type: SidebarType.VoiceChat, icon: SidebarVoicechat },
  { type: SidebarType.Member, icon: SidebarMember },
];

<Nav>
  {navButtons.map((button) => (
    <NavButton
      key={button.type}
      onClick={() => setInterfaceType(button.type)}
      active={interfaceType === button.type}
    >
      <img src={button.icon} alt={`Sidebar ${button.type}`} />
    </NavButton>
  ))}
</Nav>