React Bootstrap을 사용하여 그리드 레이아웃 구현

1. React Bootstrap - 그리드 시스템
2. 반응 부트스트랩 <컨테이너> 구성 요소
3. 반응 부트스트랩 <Row> 구성요소
4. 반응 부트스트랩 <Col> 구성 요소

React는 사용자 인터페이스 구축을 위한 가장 인기 있는 프런트 엔드 라이브러리 중 하나입니다. 재사용 가능한 구성 요소의 개념을 사용하여 짧은 시간 내에 빠르고 아름다운 애플리케이션을 구축합니다.

여전히 사용자 지정 구성 요소를 구축하는 데 시간이 많이 걸릴 수 있습니다.

다른 사람이 작성한 구성 요소를 재사용하여 프로세스 속도를 높일 수 있습니다. 일부 라이브러리에는 최신 웹 애플리케이션 구축을 위한 입력, 버튼 및 기타 공통 요소에 대한 구성 요소가 포함되어 있습니다.

React Bootstrap - 그리드 시스템

이 기사에서는 React Bootstrap에서 사용할 수 있는 그리드 레이아웃 시스템에 대해 설명합니다. 일반 Bootstrap의 Grid 시스템에 익숙하다면 React Bootstrap에서 쉽게 파악할 수 있을 것입니다.

개발자는 컨테이너, 행 및 열에 대한 사용자 지정 구성 요소를 포함할 수 있습니다. 이를 사용하여 페이지의 콘텐츠 레이아웃을 쉽게 구성할 수 있습니다.

내부적으로 React Bootstrap은 Flexbox를 사용하여 이를 수행합니다.

반응 부트스트랩 <컨테이너> 구성 요소

<컨테이너> 사용자 지정 구성 요소는 콘텐츠를 중앙에 배치하고 패딩하는 데 유용합니다. React Bootstrap API를 사용하면 컨테이너의 너비를 지정할 수 있습니다.

다음은 <Container> 구성 요소에 래핑된 웹 사이트 콘텐츠의 예입니다.

import Container from 'react-bootstrap/Container';

export default function App() {
  return (
    <Container fluid>
      <h1>Container Sample</h1>
    </Container>
  );
}

fluid 속성은 화면 크기에 관계없이 100% 너비를 유지할 수 있습니다.

fluid 속성 값을 설정하기 위해 중단점(sm, md, lg, xl, xxl) 중 하나를 지정할 수도 있습니다. 설정하면 사용자 화면 크기가 이 중단점에 도달할 때까지 컨테이너가 유동적으로 유지됩니다.

<Container> 구성 요소는 독립 실행형으로 유용합니다. 패딩을 제공하며 콘텐츠를 중앙에 배치하는 데 사용할 수 있습니다.

그러나 <Row> 및 <Col> 사용자 지정 구성 요소와 결합할 때 더 유용합니다.

반응 부트스트랩 <Row> 구성요소

이 구성 요소를 사용하면 콘텐츠를 수평으로 구성할 수 있습니다. 각 <행> 구성 요소는 일반적으로 여러 열을 포함합니다.

import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

export default function App() {
  const redBorder = { border: "1px solid red" };
  return (
    <div>
      <Container style={redBorder}>
        <Row>
          <Col>First Column</Col>
          <Col>Second Column</Col>
        </Row>
      </Container>
    </div>
  );
}

반응 부트스트랩 <Col> 구성 요소

마지막으로 <Col> 사용자 지정 구성 요소를 사용하여 행을 가로로 나눌 수 있습니다. <Row> 구성 요소에 속성이 없는 두 개의 <Col>이 포함된 경우 이 두 구성 요소는 두 구성 요소 사이의 모든 여유 공간을 차지합니다.

xs 속성을 사용하여 열 중 하나의 너비를 지정할 수 있습니다. 예제를 살펴보겠습니다.

import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

export default function App() {
  const redBorder = { border: "1px solid red" };
  return (
    <div>
      <Container style={redBorder}>
        <Row>
          <Col>First Column</Col>
          <Col xs={6}>Second Column</Col>
          <Col>Third Column</Col>
        </Row>
      </Container>
    </div>
  );
}

이 경우 두 번째 열은 남은 여유 공간을 두 번째 열로 나누어 나머지 두 열보다 더 넓습니다.