📌오늘의 커밋
- 상품 업로드 페이지 작성
- Antd 사용하기
- Antd <Form>, <Input>
지난 글에 이어서 진행합니다.
2025.03.13 - [프로젝트/게시판 만들기] - 그랩 마켓 3탄.
그랩 마켓 3탄.
📌오늘의 커밋products 상세 페이지 작성& useEffect, useState 사용App.js에 header와 footer 넣기상세 페이지 CSS 작성지난 글에 이어서 진행합니다.2025.03.11 - [프로젝트/그랩 마켓 만들기] - 그랩 마켓 만들
haruharu-trybest.tistory.com
저희 프로젝트는 인프런의 강의를 기반으로 진행됩니다.
- 강의명 : 비전공자를 위한 진짜 입문 올인원 개발 부트캠프
비전공자를 위한 진짜 입문 올인원 개발 부트캠프 강의 | 그랩 - 인프런
그랩 | , [사진] 쉽고 다양하게 활용되는 Javascript 로 공부해요! Javascript(자바스크립트)는 웹을 시작으로 서버, 모바일, 머신러닝, 블록체인 등 다양한 분야에서 사용되는 프로그래밍 언어예요. 상
www.inflearn.com
시작합니다!
[1] 파일 트리
이전 파일 트리와 동일하기 때문에 이번에는 스킵합니다.
[2] 소스코드
upload/index.js
upload/index.css
[3] 공부하기
📌 Ant Design (antd)란?
**Ant Design(antd)**는 React를 위한 UI 컴포넌트 라이브러리입니다.
📌 깔끔하고 현대적인 디자인을 쉽게 구현할 수 있도록 다양한 UI 컴포넌트를 제공합니다.
📌 버튼, 폼, 테이블, 모달, 아이콘 등 다양한 기능이 포함되어 있음
📌 기업용 대시보드, 관리 시스템 등에 자주 사용됨
🔹 1. Ant Design 설치하기
✅ npm 사용
npm install antd✅ yarn 사용
yarn add antd설치 후, 필요한 컴포넌트를 import해서 사용하면 됩니다.
🔹 2. Ant Design의 기본 사용법
✅ 1) 버튼 사용 예제
import React from "react";
import { Button } from "antd";
function App() {
return (
<div>
<Button type="primary">Primary 버튼</Button>
<Button>Default 버튼</Button>
<Button type="dashed">Dashed 버튼</Button>
<Button type="link">Link 버튼</Button>
</div>
);
}
export default App;🧐 설명
- Button 컴포넌트를 가져와서 사용.
- type 속성을 변경하여 다양한 버튼 스타일 적용 가능.
- primary → 주 버튼
- default → 일반 버튼
- dashed → 점선 버튼
- link → 링크 스타일 버튼
🔹 3. Ant Design의 주요 컴포넌트
Ant Design에는 다양한 UI 컴포넌트가 포함되어 있습니다.
✅ 1) 아이콘 사용하기
import { HomeOutlined, SettingFilled } from "@ant-design/icons";
function App() {
return (
<div>
<HomeOutlined style={{ fontSize: "24px", color: "blue" }} />
<SettingFilled style={{ fontSize: "24px", color: "red" }} />
</div>
);
}
export default App;📌 @ant-design/icons 패키지를 자동으로 설치하여 사용 가능
📌 다양한 아이콘을 제공하며, 스타일을 쉽게 조정할 수 있음.
✅ 2) 입력 폼 (Form, Input, Button)
import { Form, Input, Button } from "antd";
function LoginForm() {
const onFinish = (values) => {
console.log("폼 데이터:", values);
};
return (
<Form onFinish={onFinish}>
<Form.Item name="username" label="사용자명" rules={[{ required: true }]}>
<Input placeholder="사용자명을 입력하세요" />
</Form.Item>
<Form.Item name="password" label="비밀번호" rules={[{ required: true }]}>
<Input.Password placeholder="비밀번호를 입력하세요" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">로그인</Button>
</Form.Item>
</Form>
);
}
export default LoginForm;📌 Form 컴포넌트를 활용하면 자동으로 유효성 검사 가능!
📌 rules={[{ required: true }]}를 사용하면 필수 입력값으로 설정 가능.
✅ 3) 테이블 (Table)
import { Table } from "antd";
const columns = [
{ title: "이름", dataIndex: "name", key: "name" },
{ title: "나이", dataIndex: "age", key: "age" },
{ title: "주소", dataIndex: "address", key: "address" },
];
const data = [
{ key: "1", name: "홍길동", age: 25, address: "서울" },
{ key: "2", name: "이순신", age: 30, address: "부산" },
];
function UserTable() {
return <Table columns={columns} dataSource={data} />;
}
export default UserTable;📌 테이블을 쉽게 구현할 수 있으며, 정렬, 검색, 필터 기능도 추가 가능!
✅ 4) 모달 (Modal)
import { useState } from "react";
import { Button, Modal } from "antd";
function App() {
const [visible, setVisible] = useState(false);
return (
<div>
<Button type="primary" onClick={() => setVisible(true)}>모달 열기</Button>
<Modal
title="안녕하세요!"
visible={visible}
onOk={() => setVisible(false)}
onCancel={() => setVisible(false)}
>
<p>이것은 Ant Design 모달입니다.</p>
</Modal>
</div>
);
}
export default App;📌 모달을 쉽게 띄울 수 있으며, onOk와 onCancel 이벤트도 설정 가능!
✅ 5) 메시지 알림 (message, notification)
1) message 사용
import { Button, message } from "antd";
function App() {
const showMessage = () => {
message.success("성공 메시지!");
};
return <Button onClick={showMessage}>메시지 표시</Button>;
}
export default App;📌 버튼을 클릭하면 메시지가 나타남!
📌 message.success(), message.error(), message.warning() 등 다양한 스타일 제공.
2) notification 사용
import { Button, notification } from "antd";
function App() {
const showNotification = () => {
notification.info({
message: "알림 제목",
description: "이것은 Ant Design 알림입니다.",
});
};
return <Button onClick={showNotification}>알림 표시</Button>;
}
export default App;📌 사용자에게 중요한 정보를 표시할 때 사용!
📌 notification.success(), notification.error(), notification.warning() 등 제공.
🔹 4. Ant Design을 사용할 때 주의할 점
- CSS 스타일 충돌 가능성
- antd의 기본 CSS가 기존 프로젝트와 충돌할 수 있음.
- 특정 스타일을 덮어쓰려면 override해야 함.
- 전체 CSS 불러오지 않기
- 필요한 컴포넌트만 불러오는 것이 성능에 좋음.
- 전체 CSS를 불러오면 용량이 커질 수 있음.
- ✅ 권장 방식
- 커스텀 스타일 적용
- antd 기본 스타일을 변경하고 싶다면 styled-components 또는 CSS-in-JS 사용 가능.
import "antd/dist/reset.css"; // 최신 버전에서는 필요 없음🔹 5. Ant Design을 언제 사용할까?
✅ 빠르게 UI를 구축해야 할 때 (예: 대시보드, 관리 시스템)
✅ 일관된 디자인 시스템을 유지하고 싶을 때
✅ 복잡한 UI 컴포넌트(테이블, 폼, 모달 등)를 쉽게 구현하고 싶을 때
🔹 6. 정리
🚀 Ant Design(antd)은 React에서 빠르고 깔끔한 UI를 만들 수 있는 강력한 라이브러리!
✅ 다양한 UI 컴포넌트 제공 (버튼, 폼, 테이블, 모달, 아이콘 등)
✅ 복잡한 기능도 쉽게 구현 가능 (메시지, 알림, 드롭다운 등)
✅ 기업용 웹사이트, 대시보드, 관리 시스템 등에 적합
👉 Ant Design을 활용하면 개발 속도를 높이고, UI 디자인을 깔끔하게 정리할 수 있습니다! 😊 🚀
'프로젝트 > 그랩 마켓 만들기' 카테고리의 다른 글
| 그랩 마켓 만들기 5탄_Express (0) | 2025.03.22 |
|---|---|
| 그랩 마켓 3탄. (0) | 2025.03.13 |
| 그랩 마켓 만들기 2탄. (1) | 2025.03.11 |
| 그랩 마켓 만들기 1탄. (1) | 2025.03.10 |