[React] 컴포넌트 인터페이스 개요 - 모듈 설계

컴포넌트를 설계하다보면 같은 역할, 비슷한 역할들의 컴포넌트들이 생성됩니다.

 

예를 들어 모바일 버전 네비게이션, PC 버전 네비게이션의 경우 같은 역할이지만 두개의 컴포넌트가 생성될 수 있습니다.

<MobileNavigation />, <DesktopNavigation /> 처럼 분할될 수 있죠.

 

취소 버튼, 확인 버튼 등 테마에 따라 컴포넌트들이 분할될 수도 있습니다.

같은 역할의 컴포넌트들이 분할되다보면 유지보수성과 가독성이 떨어져 악영향을 줍니다.

 

이번 글에서는 모듈의 인터페이스를 구현해 비슷한 역할의 컴포넌트를 묶는 방법에 대해 소개드립니다.

1. JSON 인터페이스

<MainButton.Confirm>확인</MainButton>
<MainButton.Cancel>취소</MainButton>

 

JSON 방식 인터페이스는 무한히 확장될 수 있습니다.

또한 리액트에서 명시적으로 사용할 수 있으며 Lint를 통해 개발자에게 더 많은 정보를 제공할 수 있습니다.

 

코드는 가독성때문에 마지막에 정리하였습니다.

복사/붙여넣기가 필요하신분은 확인하시면 되겠습니다.

MainButton에 호버하면 사용가능한 테마 목록이 보인다

Confirm에 마우스를 호버하면 테마에 대한 설명이 보인다

 

1-1 구현 방법

먼저 theme에 따라 디자인이 변경되는 ThemeButton을 생성합니다.

그 후 MainButton을 선언하여 원하는 만큼 속성을 담습니다.

 

 

 

 

 

MainButton을 선언하고 테마에 맞게끔 속성들을 할당해줍니다.

이제는 JSON 형식으로 테마에 맞는 버튼을 사용할 수 있습니다.

export default functon MainPage() {

	return (
    	{/* 메인 페이지 코드 */}
    	<MainButton.Confirm>확인</MainButton>
        <MainButton.Cancel>취소</MainButton>
    )
}

반응형

1-2 코드

블로그 설정상 가독성이 좋지않아 VSCode로 옮겨서 보시는걸 추천합니다.

import { ButtonHTMLAttributes } from "react";
import { clsx } from "keycloakify/tools/clsx";
import styles from "./index.module.css";
import themes from "./theme.module.css";

function ThemeButton({
    theme,
    children,
    ...props
}: {
    /** 적용될 색상
     *
     * @param default Axis 로고 색
     * @param cancel 회색톤 (취소버튼 등)
     */
    theme: "default" | "cancel";
    children: React.ReactNode;
} & ButtonHTMLAttributes<HTMLButtonElement>) {
    return (
        <button className={clsx(styles["main-button"], themes[theme])} {...props}>
            {children}
        </button>
    );
}

/** 통일된 버튼 디자인을 제공하는 컴포넌트 */
const MainButton = {
    /** 로고 색을 담은 확인 버튼 */
    Confirm: ({
        children,
        ...props
    }: { children: React.ReactNode } & ButtonHTMLAttributes<HTMLButtonElement>) => (
        <ThemeButton theme="default" {...props}>
            {children}
        </ThemeButton>
    ),
    /** 취소 버튼 */
    Cancel: ({
        children,
        ...props
    }: { children: React.ReactNode } & ButtonHTMLAttributes<HTMLButtonElement>) => (
        <ThemeButton theme="cancel" {...props}>
            {children}
        </ThemeButton>
    )
};

export default MainButton;

<MainButton.Confirm>확인</MainButton.Confirm>;

2. 자동 제어 컴포넌트

<Navigation /> 같은 컴포넌트는 모바일 버전과 데스크탑 버전 두가지가 존재할 수 있습니다.

 

모바일이면 모바일네비를, 데스크탑이면 PC네비를 렌더링할 수 있다.

 

자동 제어 컴포넌트는 환경 혹은 설정에 따라 적절하게 선택되는 컴포넌트입니다.

사진처럼 접속된 환경에 따라 적절한 <Navigation />이 선택됩니다.

 

저는 현재 이 방법을 주로 네비게이션에 자주 활용합니다.

뿐만 아니라 반응형 웹 이상으로, 반응형 컴포넌트를 구상할때에도 아주 유용한 방법입니다.

 

모바일 화면 개발자와 PC화면 개발자 모두 똑같은 <Navigation />으로 인터페이스를 제공하기에, 일관성있는 프로그래밍이 가능합니다.

서로에 대한 영향도 없기 때문에 유지보수 측면에서도 훌륭합니다.

3. 타입 혹은 테마에 따라 분할

이 구조는 첫번째로 소개한 JSON 확장 방식과 유사하고 때문에 확장성, 사용감 등 모든 면에서 비슷합니다.

type에 따라 객체의 상태가 변화합니다. 가장 일반적인 형태며 자주 사용되는 컴포넌트 인터페이스입니다.

 

type에 따라 배경색이 달라지는 Message 컴포넌트

 

JSON 방식의 인터페이스와의 차이점

1. 코드의 길이가 짧다.
2. 가독성이 좋다.
3. 사용할때의 가독성은 낮다.
4. 각각의 속성에 대한 자세한 설명을 할 수 없다.

JSON 방식의 가장 큰 단점은 컴포넌트를 생성하고 그 컴포넌트들을 담은 또다른 객체가 필요합니다.

type 방식은 바로 매핑되는 설계로 코드의 길이가 더 짧을 수밖에 없고, 그로인해 가독성이 좋아집니다.

 

다만, 사용할때의 입장에서는 각 타입마다의 설명이 가능한 JSON 방식이 더 좋습니다.

type은 단순히 string으로 그 값으로 의미를 짐작할 뿐이지만, JSON 방식은 주석으로 더욱 상세한 설명이 가능합니다.

마치며...

지금까지 제가 자주 사용하는 컴포넌트 인터페이스에 대해서 정리해 보았습니다.

여러가지 방식을 적절히 사용하여 "아름다운" 컴포넌트를 설계하는데 도움이 되기를 바랍니다.

추천 포스트

[프로그래밍] 나만의 클린코드

[VSCode] 협업시 프로젝트 환경설정 (.vscode 폴더)