[버전 2.8.0]
React Bootstrap
bootstrap은 twitter에서 만든 오픈소스 프레임워크로, 반응형 웹 개발에 특화된 UI 라이브러리이며 매우 유명하다. react bootstrap은 bootstrap 프레임워크를 react 애플리케이션에서 사용할 수 있도록 구현한 라이브러리이다.
또한 react 컴포넌트로 bootstrap의 스타일과 기능을 사용할 수 있게 해준다. 이를 통해 react 기반의 애플리케이션에서도 쉽게 bootstrap의 UI 컴포넌트를 사용할 수 있다.
설치
-
npm 설치
npm install react-bootstrap bootstrap -
css / scss 파일에 import
- css : import 'bootstrap/dist/css/bootstrap.min.css';
- scss : @import '~bootstrap/scss/bootstrap';
특징
-
쉬운 사용성
react의 컴포넌트 기반 접근 방식과 bootstrap 스타일 및 레이아웃을 결합하여 개발자가 간단하게 UI를 구축하고 관리할 수 있도록 해준다. 컴포넌트들은 재사용 가능하며, 필요한 부분만 선택적으로 사용할 수 있다. -
반응형 디자인
bootstrap은 모바일부터 데스크톱까지 다양한 화면 크기에 대응하는 반응형 디자인을 제공하며 이는 react bootstrap도 해당된다. 덕분에 화면 크기에 따라 알아서 조정되는 반응형 UI를 쉽게 구현할 수 있다. -
break point
bootstrap의 breack point는 장치 또는 뷰포트 크기에서 반응형 레이아웃이 작동하는 방식을 결정하는 너비이다. 종류에는 sm, md, lg, xl, xxl등이 있으며 각각 576px, 768px, 992px, 1200px, 1400px 에서 작동한다. -
커스터마이징
react bootstrap의 컴포넌트들은 기본 스타일링을 가지고 있지만, 필요에 따라 커스터마이징할 수 있다. 기존 bootstrap의 class를 지정하여 스타일링하는 기능 역시 가능하다. 또한 컴포넌트의 속성을 활용하여 동작을 조정할 수 있다. 또한 VS Code의 확장팩인 Bootstrap IntelliSense을 설치하면 bootstrap의 스타일링 className을 자동완성할 수 있다.
<Container className='justify-content-md-center justify-content-end'></Container>
// md영역 이상부터는 중앙정렬, 그 미만은 오른쪽정렬을 의미한다.
<Button className='mb-md-4 py-xl-3 pt-md-2'>click!</Button>
// margin bottom을 md영역 이상부터 4만큼,
// padding y축을 xl 영역부터 3만큼, padding 탑을 md영역에서 2만큼을 의미한다.
bootstrap에서 자주 보이는 html prop 종류
-
aria-label
요소의 목적이나 기능을 명시적으로 설명하는 데 사용된다. 스크린 리더 사용자가 해당 요소를 이해할 수 있도록 도와준다. 주로 아이콘 버튼이나 이미지 버튼 등에서 사용된다. 이는 해당 요소에게 접근자 이름을 제공하게 된다. -
aria-describedby
해당 요소와 연관된 추가 정보나 설명이 있는 요소의 ID를 제공하는 데 사용된다. 사용자에게 해당 요소에 대한 자세한 설명을 제공할 수 있다. -
aria-hidden
요소를 사용자에게 숨기거나 표시하는 데 사용된다. 일부 요소는 시각적으로는 보이지만 접근성을 고려해 숨겨야 할 경우에 사용된다. -
aria-role
이 속성은 요소의 역할(role)을 지정한다. 역할은 요소의 의미나 기능을 설명하여 사용자가 요소를 이해하고 적절한 방식으로 읽을 수 있도록 도와준다.
이러한 WAI-ARIA 속성들은 웹 접근성을 향상시키기 위해 사용되며, 사용자 및 접근성을 고려한 사용자들이 웹 페이지에서 정보를 이해하고 상호작용할 수 있도록 도와준다. react bootstrap과 같은 라이브러리를 사용하면 이러한 속성들을 컴포넌트에 통합하여 접근성을 높일 수 있다.
