[react] 레이아웃 및 그리드 시스템의 정의와 적용

26 Dec 2023

react

React 애플리케이션을 개발할 때 레이아웃과 그리드 시스템은 중요한 구성 요소입니다. 레이아웃은 화면을 구성하는 요소들의 배치를 다루며, 그리드 시스템은 화면을 일정한 간격으로 분할하여 구성하는 방법을 제공합니다. 이러한 요소들은 UI를 일관되게 구축하고 관리하는 데 도움이 됩니다.

레이아웃

레이아웃은 페이지의 구조를 결정하고, 컴포넌트들을 배치하는 방법을 다룹니다. React에서 레이아웃은 주로 Flexbox나 CSS 그리드를 활용하여 구현됩니다.

Flexbox

Flexbox는 요소들을 부모 컨테이너 내에서 유연하게 배치할 수 있는 레이아웃 모델을 제공합니다. 아래는 Flexbox를 사용하여 레이아웃을 정의하는 예시입니다.

import React from 'react';

const App = () => {
  return (
    <div style={{ display: 'flex', flexDirection: 'row' }}>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </div>
  );
}

export default App;

CSS 그리드

CSS 그리드는 2차원 레이아웃 시스템을 제공하여, 행과 열을 이용해 레이아웃을 구성할 수 있습니다. 아래는 CSS 그리드를 사용하여 레이아웃을 정의하는 예시입니다.

import React from 'react';

const App = () => {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr' }}>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </div>
  );
}

export default App;

그리드 시스템

그리드 시스템은 화면을 일정한 간격으로 분할하여 컨텐츠를 배치하는 방법을 다룹니다. React에서는 대표적으로 react-grid-system 패키지를 활용하여 그리드 시스템을 쉽게 구현할 수 있습니다.

import React from 'react';
import { Container, Row, Col } from 'react-grid-system';

const App = () => {
  return (
    <Container>
      <Row>
        <Col sm={4}>Item 1</Col>
        <Col sm={4}>Item 2</Col>
        <Col sm={4}>Item 3</Col>
      </Row>
    </Container>
  );
}

export default App;

결론

레이아웃과 그리드 시스템은 React 애플리케이션에서 UI를 일관되고 효율적으로 구축하고 관리하는 데 중요한 역할을 합니다. Flexbox, CSS 그리드, 또는 react-grid-system과 같은 패키지를 활용하여 적절한 레이아웃 및 그리드 시스템을 선택하여 개발하는 것이 좋습니다.

더 많은 정보를 원하시면 MDN Web Docs, react-grid-system 공식 문서를 참고하시기 바랍니다.