공통 컴포넌트 만들기, 이름짓기(네이밍)

[JiinSeok]

공통 컴포넌트의 본질

• 함수, 텍스트, 아이콘 등 의미 있는 요소를 담아서, 다양한 상황에서 사용하도록 만든 UI 요소
• 특히, 특정 페이지나 경로에서 정의된 함수나 훅을 prop으로 전달해 사용하기 때문에 특정 위치에서의 역할에 구애받지 않고 유연함

컴포넌트 개수 = 함수 개수 x 그 함수 사용하는 ui 개수
컴포넌트 개수 = 함수 개수 x 1 --> 컴포넌트 사용의 이유

분명하고 직관적인 이름: 찾을 수 있는 이름

1. UI로서의 기능, 스타일 + 다른 UI요소와의 차별점(정체성)을 담아야 합니다 - 재사용되려면 정의해줘야 함
2. 줄임말을 피하고 완전한 이름을 사용합니다. - GNB -> GlobalNavigationBar
3. 구현 세부사항을 이름에 반영합니다. - RootLogo 대신 LogoLink
   파일을 열어보지 않아도 Link 컴포넌트 프로퍼티를 쓸 수 있구나 알 수 있습니다.

구체적인 기능보다 재사용 가능한 형태에 초점

1. 재사용되는 형태에 집중하면 컴포넌트화 해야 할 것과 아닌 것을 구별하게 되어, 재사용되지 않을 컴포넌트는 만들지 않고, 재사용될 컴포넌트는 더욱 유연하게 만들게 됩니다.
2. 특정 사용 사례에 대한 새로운 컴포넌트를 만들기보다 기존 공통 컴포넌트 재사용을 그대로 보여주면 오히려 읽기 쉽습니다.
   재사용되는 형태는 많은 사람들이 이해하고 있으며 + �특정 사례를 위한 prop과 다른 속성이 '어떻게' 사용했는지도 알려줍니다.

<LogoutButton/>
로그아웃 버튼이구나

<BasicButton onclick={handleLogout} theme={'secondary'}>로그아웃<BasicButton/>
BasicButton 모양의 secondary 테마 로그아웃 버튼이구나.
+@) 옆에는 primary theme의 다른 BasicButton이 있구나.

구조적 일관성

• 유사한 이름을 짓게 된다면 관계를 명확히 정리합니다. (BasicButton과 PlainButton -> MainButton과 PlainButton)
• 컴포넌트의 계층 구조를 폴더 구조로 정리합니다.
  RootHeader가 RootLogo, RootNav를 담고 있지만 파일은 모두 동일계층에 존재.
  -> RootNav는 RootHeader와 같은 계층의 요소임을 뜻하는 Root를 떼고 공통 컴포넌트가 되거나, RootHeader 폴더 안으로 정리되면 좋음 (사실상 RootHeaderLogo, RootHeaderNav)

// RootHeader.tsx
    <>
      <header className={styles.header}>
        <div className={styles.inner}>
          <RootLogo />
          {router === 'auth' ? (
            <AuthSpecificMenu />
          ) : (
            <>
              <RootNav />
              <HamburgerButton onClick={() => setShowGNB(true)} />
            </>
          )}
        </div>
      </header>
      {showGNB && <GNB closeAction={() => setShowGNB(false)} />}
    </>

[JiinSeok]