최적화된 공용 네비게이션 컴포넌트는 어떻게 설계할 수 있을까요?

네비게이션 바 설계의 중요성

네비게이션 바는 다양한 페이지에서 사용되는 매우 중요한 공용 컴포넌트입니다. 이 글에서는 네비게이션 바를 최적화하는 방법을 공유하려고 하는데요, 제 경험을 바탕으로, 문제점을 인식하고 개선한 과정과 그 결과를 나누고자 합니다.

기존 코드의 문제점

먼저, 기존에 사용하던 네비게이션 바의 문제점을 살펴보겠습니다. 대부분의 페이지에서 사용되다 보니, 다양한 모습으로 표현되어야 하는 요구 사항이 있었습니다. 이를 해결하기 위해 if문을 다수 사용했는데, 이는 다음과 같은 문제를 초래했습니다.

• 코드를 읽기 어렵다.
• 코드를 변경하기 두렵다.
• 개발자의 생산성을 떨어뜨린다.

개선 기준

문제를 해결하기 위해 다음 두 가지 기준을 설정했습니다:

• 하나의 컴포넌트는 하나의 역할만 감당한다.
• 어떤 요소를 보여줄지는 사용하는 쪽에서 결정한다.

단일 책임 원칙 (SRP)

하나의 컴포넌트는 하나의 역할만 감당해야 합니다. 기존의 네비게이션 컴포넌트는 변경의 이유가 너무 많아, 단일 책임 원칙을 어기고 있었습니다. 따라서 영역별로 컴포넌트를 분리했습니다.

의존성 주입 (DI)

컴포넌트 내부에서 의존성을 제거하고, 사용하는 쪽에서 의존성을 입력하는 방식을 도입했습니다. 이는 네비게이션 바의 복잡성을 줄이고, 코드의 가독성을 높이며, 유지보수를 용이하게 만들었습니다.

개선된 네비게이션 컴포넌트 구조

// TopNavigation.jsx

interface Props {
  TopBar: React.ReactNode;
  NavLinkList?: React.ReactNode;
}

const TopNavigation = ({ TopBar, NavLinkList }: Props) => {
  return (
    <Wrapper>
        {TopBar}
        {NavLinkList}
    </Wrapper>
  );
};

TopNavigation.TopBar = TopBar;
TopNavigation.NavLinkList = NavLinkList;
TopNavigation.Extentions = Extentions;

각 영역의 컴포넌트

• TopBar: 상단 네비게이션 영역
• NavLinkList: 네비게이션 링크 목록
• Extentions: 추가 기능 (예: 모달)

효과와 장점

• 유지보수의 두려움이 사라졌다: 문제 발생 시 특정 페이지의 컴포넌트만 살펴보면 되므로 두려움이 줄었습니다.
• 쉽게 추가하고 제거할 수 있게 되었다: 필요한 컴포넌트를 쉽게 주입하고 제거할 수 있습니다.
• 이슈 제보가 줄었다: 네비게이션 바와 관련된 이슈가 크게 감소했습니다.

발생한 문제점과 해결책

중복 코드가 발생할 수 있습니다. 이를 해결하기 위해 반복되는 패턴을 템플릿화된 컴포넌트로 만들었습니다.

// CloseRightNavigationLayout.jsx

const CloseRightNavigationLayout = ({ children }: Props) => {
  const router = useRouter();

  return (
    <>
      <Navigation.TopNavigation
        TopBar={
          <Navigation.TopNavigation.TopBar
            leftContent={<div />}
            rightContent={
              <>
                <Navigation.TopNavigation.TopBar.CloseButton onClick={() => router.back()} />
              </>
            }
          />
        }
      />
      {children}
    </>
  );
};

결론

다양한 페이지에서 다양한 모습으로 사용되는 네비게이션 바 컴포넌트를 리팩토링하는 과정은 매우 유익했습니다. 각 컴포넌트가 책임지는 역할의 범주를 잘 정의하고, if문을 제거하며 의존성을 주입하는 방식을 도입함으로써 유지보수와 개발 생산성을 크게 향상시킬 수 있었습니다.

혹시 더 좋은 방법이 있다면 언제든지 공유해 주세요. 함께 더 나은 코드를 만들어 나가요!