React ๊ธฐ๋ฐ์ UI ํ๋ ์์ํฌ๋ก, ๋ฏธ๋ฆฌ ๋์์ธ๋ ์ปดํฌ๋ํธ์ ์คํ์ผ์ ์ ๊ณตํ์ฌ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๋น ๋ฅด๊ฒ ๊ฐ๋ฐํ๊ณ ๋์์ธํ ์ ์๋ ๋๊ตฌ์ด๋ค.
npm install react-bootstrap bootstrap
index.jsํ์ผ์์ import ํด์ฃผ๊ธฐ
/* index.js */
import 'bootstrap/dist/css/bootstrap.min.css';
import Dropdown from 'react-bootstrap/Dropdown';
function BasicExample() {
return (
// Dropdown ์ปดํฌ๋ํธ๋ฅผ ์์ฑ
<Dropdown>
// ๋๋กญ๋ค์ด ๋ฒํผ์ ์์ฑ
<Dropdown.Toggle id="dropdown-basic">
Dropdown Button
</Dropdown.Toggle>
// ๋๋กญ๋ค์ด ๋ฉ๋ด๋ฅผ ์์ฑ
<Dropdown.Menu>
// ๊ฐ๊ฐ์ ๋๋กญ๋ค์ด ๋ฉ๋ด ์์ดํ
์ ์์ฑ
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
);
}
export default BasicExample;
import { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
function Example() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false); // ๋ชจ๋ฌ์ ๋ซ๊ธฐ ์ํ ํจ์
const handleShow = () => setShow(true); // ๋ชจ๋ฌ์ ์ด๊ธฐ ์ํ ํจ์
return (
<>
<Button variant="primary" onClick={handleShow}>
Launch demo modal
</Button>
// ๋ชจ๋ฌ ์ปดํฌ๋ํธ
<Modal show={show} onHide={handleClose}>
// ๋ชจ๋ฌ ํค๋
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
// ๋ชจ๋ฌ ๋ด์ฉ
<Modal.Body>Woohoo, you are reading this text in a modal!</Modal.Body>
// ๋ชจ๋ฌ ํธํฐ
<Modal.Footer>
// ๋ซ๊ธฐ ๋ฒํผ
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
// ์ ์ฅ ๋ฒํผ
<Button variant="primary" onClick={handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
);
}
export default Example;
import Button from 'react-bootstrap/Button';
import Col from 'react-bootstrap/Col';
import Form from 'react-bootstrap/Form';
...
<Form.Group
controlId="validationFormik101"
className="position-relative"
>
<Form.Label>First name</Form.Label>
<Form.Control
type="text" // ์
๋ ฅ ํ๋ ํ์
์ ํ
์คํธ
name="firstName" // ํผ ํ๋์ ์ด๋ฆ
value={values.firstName}
onChange={handleChange}
isValid={touched.firstName && !errors.firstName} // ์ ํจํ ๊ฐ์ธ ๊ฒฝ์ฐ ์คํ์ผ์ ์ ์ฉ
/>
</Form.Group>
Nav, Overlay, Accordion ๋ฑ๋ฑ ๋ค์ํ ์ปดํฌ๋ํธ ๋ณด๋ฌ๊ฐ๊ธฐ
๐ (๊ณต์๋ฌธ์)react-bootstrap
๐ Material UI๋ก๋ ๊ฐํธํ๊ฒ ์ฌ์ฉ ๊ฐ๋ฅ
๐ react-native์์ ์ฌ์ฉํ ์ ์๋ native-base
์ ๋ฆฌ๊ฐ ์ ๋ ๊ธ์ด๋ค์. ๋์์ด ๋์ต๋๋ค.