프론트엔드 개발/React
[React] BootStrap vs React-BootStrap
Jongung
2022. 4. 29. 20:03
BootStrap vs React BootStrap
- 일단 React BootStrap은 BootStrap의 코드를 기초로 개발 되었기 때문에, BootStrap Library를 꼭 가지고 있어야 구동이 가능하다. 일반 BootStrap말고 React-BootStrap, Vue-BootStrap 같이 일반적으로 많이 사용되는 반응형 웹 프레임워크같은 경우엔 본인들만의 BootStrap을 따로 개발하여 사용하고 있다.
- 일반 부트스트랩을 사용하지 않는 이유는 간단하다. BootStrap 4 기준으로 작성 된 부트스트랩 코드를 살펴보자
import React from 'react';
const ReactWithBootstrap = () => {
return (
<form>
<div className="form-row">
<div className="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input
type="email"
className="form-control"
id="inputEmail4"
placeholder="Email"
/>
</div>
<div className="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input
type="password"
className="form-control"
id="inputPassword4"
placeholder="Password"
/>
</div>
</div>
<div className="form-group">
<label for="inputAddress">Address</label>
<input
type="text"
className="form-control"
id="inputAddress"
placeholder="1234 Main St"
/>
</div>
<div className="form-group">
<label for="inputAddress2">Address 2</label>
<input
type="text"
className="form-control"
id="inputAddress2"
placeholder="Apartment, studio, or floor"
/>
</div>
<div className="form-row">
<div className="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" className="form-control" id="inputCity" />
</div>
<div className="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" className="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div className="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" className="form-control" id="inputZip" />
</div>
</div>
<div className="form-group">
<div className="form-check">
<input className="form-check-input" type="checkbox" id="gridCheck" />
<label className="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<button type="submit" className="btn btn-primary">
Sign in
</button>
</form>
);
};
export default ReactWithBootstrap;
- 본 코드는 흔히 말하는 div 지옥에 빠져있고 코드가 너무 길다. 하지만 React BootStrap은 추구하는 방향이 다르다. div className=’’" 형식을 모두 제거하고 자신들많의 Element 이름을 만들어 코드를 더 간편하게 작성하는 데 초점이 맞춰져 있다.
import React from 'react';
import { Form, Col, Button } from 'react-bootstrap';
const ReactWithReactBootstrap = () => {
return (
<Form>
<Form.Row>
<Form.Group as={Col} controlId="formGridEmail">
<Form.Label>Email</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
</Form.Group>
<Form.Group as={Col} controlId="formGridPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" />
</Form.Group>
</Form.Row>
<Form.Group controlId="formGridAddress1">
<Form.Label>Address</Form.Label>
<Form.Control placeholder="1234 Main St" />
</Form.Group>
<Form.Group controlId="formGridAddress2">
<Form.Label>Address 2</Form.Label>
<Form.Control placeholder="Apartment, studio, or floor" />
</Form.Group>
<Form.Row>
<Form.Group as={Col} controlId="formGridCity">
<Form.Label>City</Form.Label>
<Form.Control />
</Form.Group>
<Form.Group as={Col} controlId="formGridState">
<Form.Label>State</Form.Label>
<Form.Control as="select" defaultValue="Choose...">
<option>Choose...</option>
<option>...</option>
</Form.Control>
</Form.Group>
<Form.Group as={Col} controlId="formGridZip">
<Form.Label>Zip</Form.Label>
<Form.Control />
</Form.Group>
</Form.Row>
<Form.Group id="formGridCheckbox">
<Form.Check type="checkbox" label="Check me out" />
</Form.Group>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
);
};
export default ReactWithReactBootstrap;
- 사실 구버전의 BootStrap같은 경우 jQuery를 기반으로 한 부트스트랩이였어서 jQuery를 사용하지 않는 반응형 웹 프레임워크를 위해 개발 되었지만, 현재의 BootStrap4, 5는 Vanila JS를 기반으로 제작되었기 때문에 일반 BootStrap을 사용해도 따로 문제는 없다.
- 따라서 결론은 이렇다.
- 읽기 쉽고 깔끔한 코드를 위해 자체 컴포넌트를 지원하는 React-BootStrap을 사용할 것
- Virtual-Dom을 이유로 부트스트랩 애니메이션을 사용할 경우엔 더더욱 React-BootStrap을 사용할 것