Programming/프론트엔드

컴포넌트(Component) 기반의 UI 인터페이스란?

디자이너 슈 2025. 2. 12. 07:25

마치 장난감 블록을 조립하는 것처럼 생각하면 된다!

1. UI (유저 인터페이스) 란?

"우리가 눈으로 보고 만질 수 있는 모든 것"
예) 스마트폰 화면, TV 리모컨 버튼, 컴퓨터 마우스

  • 예시:
    • 📱 핸드폰 앱의 "좋아요" 버튼
    • 🖥️ 컴퓨터의 "파일 저장" 메뉴

2. 컴포넌트 (Component) 란?

"레고 블록처럼 조립하는 부품"
예) 레고 집을 만들 때 문, 창문, 지붕은 각각 다른 블록

  • 예시:
    • 🧩 웹사이트의 "로그인 버튼"
    • 🧩 인스타그램의 "댓글 입력창"

👉 컴포넌트 = 작은 부품을 모아 큰 것을 만드는 것

3. UI 라이브러리 (UI Library) 란?

"레고 블록을 사는 가게"
예) 레고 가게에 가면 미리 만들어진 블록을 골라 살 수 있듯이,
개발자도 미리 만들어진 UI 부품(컴포넌트)을 가져다 쓸 수 있어요!

  • 예시:
    • 🔧 React는 "버튼, 메뉴, 폼" 같은 UI 부품 가게
    • 🔧 개발자는 이 가게에서 부품을 사와 앱을 조립

👉 UI 라이브러리는 개발자에게 도구를 빌려주는 대여점

4. 컴포넌트 기반이 뭔가요?

"레고로 집을 짓듯, 작은 부품을 조합해 앱을 만드는 방법"

  • 예시:
    • 🏠 레고 집 = 앱 전체
    • 🚪 문 컴포넌트 + 🪟 창문 컴포넌트 + 🔲 벽 컴포넌트 = 완성된 집

👉 컴포넌트 기반은 작은 부품을 재사용해 큰 것을 만드는 마법

5. React는 왜 편리한가요?

"레고 전문가가 미리 예쁜 블록을 다 만들어놨기 때문!"

  • 레고처럼 똑같은 버튼을 100개 만들 필요 없어요!
  • 이미 만들어진 버튼 블록을 복사해서 쓸 수 있어요 ✨

📚 전체 요약

  1. UI = 우리가 보는 화면 전체 (버튼, 글자, 그림)
  2. 컴포넌트 = 그 화면을 이루는 작은 부품 (레고 블록)
  3. UI 라이브러리 = 그 부품들을 모아둔 상자 (레고 세트)
  4. React = 최고의 레고 세트 🏆 → 부품 조립이 쉬움!

"컴포넌트 기반 UI 라이브러리" = "레고로 앱을 만드는 도구상자"

 

1. React 기반 UI 라이브러리

(1) Material-UI (MUI)

  • 구글의 Material Design 스타일 컴포넌트
  • 🔗 공식 사이트
  • 예시: 버튼, 카드, 메뉴 등

(2) Ant Design

  • 엔터프라이즈급 디자인 시스템
  • 🔗 공식 사이트
  • 예시: 테이블, 폼, 차트

(3) Chakra UI

  • 간결하고 모던한 디자인
  • 🔗 공식 사이트
  • 예시: 반응형 레이아웃, 다크모드 지원

2. 다른 프레임워크용 UI 라이브러리

(1) Vue.js용 - Vuetify

(2) Angular용 - Angular Material

3. CSS 컴포넌트 라이브러리

(1) Bootstrap

(2) Tailwind CSS

🔨 사용 방법 예시 (React + MUI)

  1. 터미널에 설치:
  2. npm install @mui/material @emotion/react @emotion/styled
  3. 코드에서 컴포넌트 사용:
  4. import Button from '@mui/material/Button'; function App() { return <Button variant="contained">눌러주세요!</Button>; }

💡 꿀팁

  • UI 라이브러리는 "레고 부품 상자"처럼 필요할 때 골라 쓰면 됩니다!
  • 공식 문서의 "Getting Started" 섹션에서 5분 만에 시작 가능 🚀