> Hello World !!!

개발에서 Select와 Selector의 네이밍 차이점에 대해 명확하게 정리하겠습니다.

Select의 사용

Select는 단순한 선택 행위나 기능을 나타낼 때 사용합니다.

적절한 사용 사례:

• TemplateSelect: 템플릿 선택 드롭다운
• UserSelect: 사용자 선택 컴포넌트
• DateSelect: 날짜 선택 컴포넌트

특징:

• 단일 선택 행위에 초점
• 간단한 상호작용
• 주로 드롭다운이나 라디오 버튼 같은 단순 선택 UI

Selector의 사용

Selector는 선택을 위한 도구나 복잡한 선택 메커니즘을 의미합니다.

적절한 사용 사례:

• ColorSelector: 색상 선택 도구
• FileSelector: 파일 선택 도구
• ThemeSelector: 테마 선택 도구

특징:

• 도구로서의 정체성
• 복잡한 상호작용 제공
• 여러 기능이 통합된 UI 컴포넌트

구분 기준

Select 사용 조건:

• 단순 선택 기능
• 드롭다운 형태의 UI
• 즉각적인 선택이 가능한 경우

Selector 사용 조건:

• 도구적 성격이 강한 경우
• 복잡한 선택 프로세스
• 부가 기능이 포함된 경우

실제 적용 예시

// Select 예시 - 단순 선택
const TemplateSelect = () => (
  <Select>
    <Option value="1">템플릿 1</Option>
    <Option value="2">템플릿 2</Option>
  </Select>
);

// Selector 예시 - 복잡한 도구
const ColorSelector = () => (
  <div className="color-selector">
    <ColorPicker />
    <ColorPalette />
    <ColorInput />
    <RecentColors />
  </div>
);

네이밍 결정 프로세스

1. 기능 분석

   • 단순 선택인가?
   • 복잡한 도구인가?

2. 사용자 상호작용 파악

   • 즉각적인 선택이 가능한가?
   • 여러 단계의 프로세스가 필요한가?

3. UI 복잡도 검토

   • 단일 컴포넌트인가?
   • 여러 하위 컴포넌트가 필요한가?

이러한 구분을 통해 더 명확하고 일관된 네이밍 컨벤션을 유지할 수 있습니다.