MUI 스택: React에서 1차원 레이아웃 마스터하기

소개

매끄러운 1차원 레이아웃을 만드는 것은 웹 개발에서 어려운 경우가 많지만 MUI 스택을 사용하면 간단합니다. 강력한 React 구성 요소 라이브러리인 MUI는 Flexbox 또는 사용자 정의 CSS를 자세히 다루지 않고도 수직 및 수평 배열을 관리하기 위한 효율적인 도구로 Stack 구성 요소를 제공합니다. 이 가이드는 설정부터 실제 사용까지 MUI 스택의 필수 사항을 이해하고 React에서 레이아웃 구축 경험을 향상시키는 데 도움이 될 것입니다.

MUI 스택 시작하기

MUI 스택으로 레이아웃 구축을 시작하려면 필요한 MUI 패키지가 설치되어 있는지 확인하세요. MUI의 스택 구성 요소는 세 가지 주요 패키지에 의존합니다:

• @mui/material: Stack을 포함한 모든 MUI 구성요소가 포함된 핵심 패키지입니다.
• @emotion/react 및 @emotion/styled: MUI는 기본적으로 스타일링에 Emotion을 사용하며 이러한 패키지를 사용하면 구성 요소 스타일을 원활하게 사용자 지정할 수 있습니다.

설치

터미널에서 다음 명령을 실행하여 필수 패키지를 설치하세요.

# Using npm
npm install @mui/material @emotion/react @emotion/styled

# Using Yarn
yarn add @mui/material @emotion/react @emotion/styled

이 단계에서는 필요한 모든 종속성을 갖춘 MUI 스택 구현을 준비합니다. (빠른 시각적 참조를 위해 터미널 설치 과정의 스크린샷을 포함하세요.)

MUI 스택의 기본 설정

패키지가 설치되었으면 Stack을 프로젝트에 통합할 준비가 되었습니다. 초기 설정을 살펴보겠습니다.

스택 가져오기 및 사용

시작하려면 React 구성 요소 파일에서 Stack 구성 요소를 가져옵니다.

import Stack from '@mui/material/Stack';

스택 방향 구성

방향 속성은 MUI 스택의 핵심이므로 가로 또는 세로 배열을 쉽게 설정할 수 있습니다. 기본적으로 Stack은 하위 요소를 수직 열로 정렬하는데, 이는 요소를 위에서 아래로 쌓는 데 적합합니다. 가로 레이아웃의 경우 방향을 "행"으로 전환하세요.

예:

import React from 'react';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';

function App() {
  return (
    <Stack direction="row" spacing={2}>
      <Typography variant="body1">First Item</Typography>
      <Typography variant="body1">Second Item</Typography>
      <Typography variant="body1">Third Item</Typography>
    </Stack>
  );
}

export default App;

이 코드에서 Direction="row"는 항목을 간격을 두고 가로로 나란히 정렬합니다. 이 설정은 메뉴 표시줄, 항목 목록 또는 행 형식으로 표시하려는 요소를 만드는 데 유용합니다.

이러한 기반을 바탕으로 MUI Stack은 레이아웃 구축 경험을 단순화할 준비가 되어 있습니다. 구성, 간격, 반응형 레이아웃에 대해 자세히 알아보는 동안 계속 지켜봐 주시기 바랍니다.

간격 및 반응성 구성

효과적인 간격은 시각적으로 매력적인 레이아웃을 만드는 데 핵심이며 MUI 스택을 사용하면 요소 사이의 간격을 쉽게 조정할 수 있습니다. 간격 소품을 사용하면 고정 값으로 또는 화면 크기에 반응하여 하위 요소 사이에 일관된 간격을 정의할 수 있습니다.

간격

고정 간격을 설정하려면 숫자 값과 함께 간격 소품을 사용하면 됩니다. 예를 들어, Spacing={2}은 모든 하위 항목 사이에 균일한 간격을 추가합니다.

# Using npm
npm install @mui/material @emotion/react @emotion/styled

# Using Yarn
yarn add @mui/material @emotion/react @emotion/styled

여기서 스택의 각 항목은 고정된 간격을 갖고 있어 간격이 균일하고 깔끔한 레이아웃을 만듭니다.

반응형 간격

MUI 스택은 또한 개체를 간격 소품에 전달하여 반응형 간격을 허용합니다. 이를 통해 화면 크기 중단점(예: xs, sm, md)에 따라 다양한 간격 값을 사용할 수 있습니다.

import Stack from '@mui/material/Stack';

이 예에서는 작은 화면에서는 간격이 좁아지고 큰 화면에서는 넓어져 최적의 가독성을 위해 자동으로 조정됩니다.

또 다른 유용한 기능은 반응적으로 방향을 조정하여 레이아웃을 다양한 화면 크기에 맞게 조정할 수 있는 Stack의 기능입니다. 방향={{ xs: "column", sm: "row" }}:
을 설정하여 다양한 중단점에 대해 서로 다른 방향을 지정할 수 있습니다.

import React from 'react';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';

function App() {
  return (
    <Stack direction="row" spacing={2}>
      <Typography variant="body1">First Item</Typography>
      <Typography variant="body1">Second Item</Typography>
      <Typography variant="body1">Third Item</Typography>
    </Stack>
  );
}

export default App;

이 설정에서는 항목이 매우 작은 화면(예: 휴대폰)에서 열로 정렬되고 작은 화면(예: 태블릿) 이상에서는 행 레이아웃으로 전환됩니다.

향상된 레이아웃 사용자 정의

MUI 스택은 더욱 복잡하고 세련된 레이아웃을 구축하기 위한 여러 가지 사용자 정의 옵션을 제공합니다. 구분선과 정렬 설정을 사용하여 레이아웃을 더욱 구체화하는 방법을 살펴보겠습니다.

구분선 추가

Divider 소품을 사용하면 스택 항목 사이에 시각적 구분선을 삽입할 수 있습니다. 이는 목록, 탐색 메뉴 또는 버튼 그룹의 요소를 명확하게 구분하는 데 특히 유용합니다.

<Stack direction="row" spacing={2}>
  <Typography variant="body1">Item 1</Typography>
  <Typography variant="body1">Item 2</Typography>
  <Typography variant="body1">Item 3</Typography>
</Stack>

이 예에서는 행 레이아웃의 각 항목 사이에 세로 구분선을 배치하여 가독성과 구조를 향상했습니다. 스택 방향이 열로 설정된 경우 방향을 가로로 설정할 수도 있습니다.

정당화 및 정렬

스택 항목을 정확하게 배치하기 위해 MUI Stack은 각각 기본 축과 교차 축을 따라 정렬을 제어하는 ​​justifyContent 및 alignItems 소품을 지원합니다.

• justifyContent: 기본 축을 따라 항목을 정렬합니다(방향이 "행"인 경우 수평, 방향이 열인 경우 수직).
• alignItems: 교차축을 따라 항목을 정렬합니다(방향이 "행"인 경우 수직, 방향이 열인 경우 수평).

예:

# Using npm
npm install @mui/material @emotion/react @emotion/styled

# Using Yarn
yarn add @mui/material @emotion/react @emotion/styled

이 설정에서 justifyContent="center"는 기본 축을 따라 항목의 중심을 맞추고, alignItems="center"는 교차 축을 따라 항목의 중심을 지정하여 깔끔하게 중앙에 배치된 레이아웃을 만듭니다. 이러한 유연성을 통해 다양한 화면 크기에 적응하고 시각적 조화를 유지하는 레이아웃을 만들 수 있습니다.

사용자 정의 스타일을 위해 시스템 속성 사용

MUI 스택은 여백, 패딩 및 기타 레이아웃 관련 CSS를 구성 요소에 직접 적용할 수 있는 편리한 스타일 속성인 시스템 소품을 지원합니다. 시스템 소품을 사용하면 추가 CSS 파일이 필요하지 않으므로 구성 요소 내에서 스타일을 관리하고 코드를 체계적이고 효율적으로 유지할 수 있습니다.

예를 들어 스택 주변에 패딩을 추가하거나 스택과 다른 요소 사이에 여백을 추가하려면 p(패딩) 또는 m(여백) 소품을 직접 설정할 수 있습니다.

import Stack from '@mui/material/Stack';

이 예에서 p={2}는 스택 주위에 내부 패딩을 추가하는 반면, m={3}은 스택과 페이지의 다른 요소 사이에 외부 여백을 만듭니다. 여백(m), 패딩(p), 너비(너비), 높이(높이)를 포함한 다양한 조정에 이러한 단축 시스템 소품을 사용할 수 있어 추가 CSS 코드 없이 중요한 레이아웃 제어를 제공합니다.

7. 결론

MUI 스택은 React에서 1차원 레이아웃을 관리하기 위한 매우 유연하고 효율적인 구성 요소입니다. Stack은 요소의 정렬, 간격 및 반응성을 단순화함으로써 사용자 정의 CSS의 필요성을 줄이고 개발 프로세스를 가속화합니다.

시스템 소품을 통해 레이아웃 방향, 간격 및 스타일을 제어하는 ​​기능을 통해 MUI Stack은 깨끗하고 유지 관리 가능한 코드를 중시하는 모든 프로젝트에 강력한 추가 기능이 됩니다. 간단한 탐색 모음을 작성하든 복잡한 반응형 레이아웃을 작성하든 MUI Stack은 UI를 구성하는 간소화된 방법을 제공합니다.

추가 MUI 문서를 자유롭게 탐색하여 고급 시스템 속성, 반응형 디자인 향상, 포괄적인 레이아웃 솔루션을 위한 다른 MUI 구성 요소와 Stack 통합 등 더 많은 사용자 정의 옵션을 잠금 해제하세요.

위 내용은 MUI 스택: React에서 1차원 레이아웃 마스터하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!