React 애플리케이션에서 Grommet 사용하기

수년에 걸쳐 React 생태계는 React 애플리케이션 개발을 돕는 라이브러리의 발명으로 성장했습니다. 이 튜토리얼에서 우리는 반응형, 접근 가능한, 모바일 우선 React 애플리케이션을 위한 구성 요소를 개발하기 위해 Grommet을 사용하는 방법을 배울 것입니다. 핵심 개념과 일부 사용 사례를 자세히 살펴보고 간단한 예제를 만들 것입니다. Grommet은 GitHub에서 6.9k 별을 가진 오픈 소스입니다.

이 튜토리얼은 Grommet을 사용하여 React 애플리케이션에서 반응형 구성 요소를 개발하는 데 관심이 있는 독자에게 도움이 될 것입니다. 이 글은 React와 Styled-components에 대한 기본적인 이해가 필요합니다.

그로멧이란?

Grommet은 반응형 및 액세스 가능한 모바일 우선 코드 구성 요소를 자랑하는 React 구성 요소 라이브러리입니다. 라이브러리의 구성 요소인 구성 요소를 통해 이 작업을 수행합니다. 여기에는 레이아웃, 유형, 색상, 컨트롤, 입력, 시각화 미디어 및 유틸리티가 포함됩니다. 모든 그로밋 구성 요소는 접근성과 반응성을 염두에 두고 내장되어 있습니다.

Grommet은 W3C의 사양에 대한 지원을 제공하여 접근성 측면에서 큰 점수를 얻습니다. 또한 프로젝트 요구 사항에 따라 색상, 유형, 구성 요소 요소 및 레이아웃 요구 사항을 사용자 지정할 수 있는 강력한 테마 및 도구를 제공합니다.

Grommet에 대한 몇 가지 인기 있는 대안에는 tailwindcs 및 스타일이 지정된 구성 요소가 포함되지만 개발자들 사이에서는 매우 인기가 있지만 각 프레임워크는 응용 프로그램을 빌드하는 접근 방식이 다릅니다. Grommet은 모바일 우선, 액세스 가능, 응답성 및 즉시 사용 가능한 테마이며 React 애플리케이션을 쉽게 만들 수 있도록 W3C를 지원하는 반면 Tailwind CSS는 개발자가 다음과 같은 CSS의 제한 없이 애플리케이션을 빌드할 수 있도록 하는 고도로 사용자 정의 가능한 유틸리티 프레임워크입니다. 계단식 규칙. Styled-components는 객체 리터럴을 사용하여 JavaScript에서 CSS 코드를 작성할 수 있게 하여 개발자가 재사용 가능한 React 구성 요소를 작성할 수 있도록 돕는 것을 목표로 하고 구성 요소를 저수준 스타일 구성으로 사용합니다.

우리 프로젝트에서는 사용자 정의 가능한 구성 요소, 접근성 및 이 자습서에서 계속 진행하는 데 필요한 테마 속성으로 인해 프로젝트에서 Grommet을 사용할 것입니다.

그로멧 부품 사용

다른 많은 구성 요소 라이브러리와 마찬가지로 Grommet은 Box, Card 및 Header 구성 요소와 같은 레이아웃 및 테마를 위한 일부 구성 요소가 미리 빌드되어 제공됩니다. 먼저 사용하려면 아래 코드 블록과 같이 NPM 또는 실을 사용하여 그로밋 패키지를 설치해야 합니다.

 npm i grommet styled-components

또는:

 yarn add grommet styled-components

위에서 styled-components도 설치했음을 알 수 있습니다. 이는 Grommet이 구성 요소의 스타일을 사용자 정의하기 위해 styled-components를 사용하기 때문입니다. 프로젝트에 styled-components를 설치하는 것이 좋습니다.

React 프로젝트에서 Grommet 컴포넌트를 사용하려면 grommet 을 가져와야 합니다. 설명을 위해 아래에 카드 구성 요소를 만들어 보겠습니다.

 import React from 'react'; import { Grommet, Card } from 'grommet'; export default function GrommetExample() { return ( <Card> <CardBody pad="medium">Body</CardBody> <Button icon={<Icons.Favorite color="red" />} hoverIndicator /> </Card> ); }

위의 코드 블록에서 grommet Grommet 패키지의 Card 구성 요소를 파일로 가져온 다음 가져온 Card 구성 요소를 사용하여 구성 요소를 래핑했습니다. 스타일은 우리가 Button 에 추가한 것처럼 Grommet 구성 요소에 개체로 추가하거나 styled-components를 사용하여 스타일을 지정할 수 있습니다.

Form 구성 요소를 보고 Grommet 구성 요소의 더 많은 예를 살펴보겠습니다.

왜 그로밋인가?

Grommet의 주요 목적은 개발자의 경험을 개선하고 모바일 우선의 액세스 가능하고 반응이 빠른 구성 요소를 사용하여 React 애플리케이션을 더 빠르게 구축할 수 있도록 하는 것입니다. Grommet은 디자인과 개발자 워크플로를 매끄럽게 조정하여 원활한 경험을 제공하므로 누구나 매우 쉽게 시작할 수 있습니다.

Grommet은 또한 기본적으로 스크린 리더에 대한 지원을 제공합니다. 다크 모드와 같은 테마 변형은 기본적으로 grommet에서 가져오고 아래와 같이 React 애플리케이션에서 themeMode 소품을 사용하여 설정할 수 있습니다.

 import React from "react"; import { Grommet, Box, Button, Heading, dark } from "grommet"; import { grommet } from "grommet"; const App = () => { const [darkMode, setDarkMode] = React.useState(false); return ( <Grommet full theme={grommet} themeMode={darkMode ? "dark" : "light"}> <Box pad="large"> <Heading level="1">Grommet Darkmode toggle</Heading> <Button label="Toggle Theme" primary alignSelf="center" margin="large" onClick={() => setDarkMode(!darkMode)} /> </Box> </Grommet> ); }; export default App;

위의 코드 블록에서 themeMode 속성을 사용하여 다크 모드를 추가했습니다. 삼항 연산자를 사용하여 페이지가 어두운 모드인지 확인하고 밝은 모드로 전환할 수 있습니다. 다음으로 애플리케이션에 밝은 모드와 어두운 모드 사이를 전환하는 버튼을 추가했습니다. 여기에서 Codesandbox의 데모를 확인할 수 있습니다.

Grommet은 다른 프레임워크와 함께 존재할 수도 있으며 React 애플리케이션의 기존 구성 요소에 영향을 미치는 전역 스타일을 추가하지 않습니다. 기능과 스타일은 스타일에 대한 객체 리터럴로 보간될 수 있습니다. Grommet은 또한 flexbox와 같은 일부 CSS 속성을 제공하는 Layout 구성 요소를 제공하며 모든 flexbox 속성을 소품으로 사용합니다.

Grommet은 다른 많은 프레임워크와 달리 <Icon /> 구성 요소를 사용하여 액세스할 수 있는 SVG 아이콘의 큰 라이브러리를 제공합니다. Grommet은 막대 차트, 지도 및 진행률 추적기와 같은 데이터 시각화를 위한 구성 요소를 제공합니다.

Netflix, IBM, Sony, Samsung, Shopify, GitHub 및 Twilio를 비롯한 여러 회사에서 오늘날 Grommet을 사용하여 실제 애플리케이션을 만들고 있습니다.

Grommet으로 가격 구성 요소 구축

이제 우리는 Grommet의 기본 및 핵심 개념을 알았고, Grommet 구성 요소를 사용하여 가격 구성 요소를 만들 것입니다. Grommet 라이브러리의 카드, 상자 및 버튼과 같은 구성 요소를 포함해야 합니다.

더 이상 고민하지 않고 시작하겠습니다!

환경 설정

먼저 베어 React 애플리케이션을 만들고 터미널에 아래 코드 블록을 작성해 보겠습니다.

 create-react-app grommet-app

위의 코드는 create-react-app 패키지를 사용하여 베어 React 애플리케이션을 생성합니다. 프로젝트 디렉토리로 이동합니다.

 cd grommet-app

다음은 프로젝트에 필요한 종속성을 설치하는 것입니다.

 yarn add grommet styled-components

이 작업을 완료했으면 아래 명령을 사용하여 프로젝트 서버를 시작합니다.

 yarn start

이 프로젝트의 경우, 스타일이 지정된 구성 요소가 있는 스타일과 카드에 대한 단일 구성 요소가 필요합니다.

아래에서 첫 번째 카드를 만들어 보겠습니다.

 import React from "react"; import styled from "styled-components"; export default function GrommetCard() { return ( <> <CardWrapper> <Card left> <Div> <Div> <CardContent> <small>Basic</small> <h1>$588</h1> </CardContent> <CardContent> <p>500 GB storage</p> </CardContent> <CardContent> <p>2 Users Allowed</p> </CardContent> <CardContent> <p>Send Up To 3 GB</p> </CardContent> </Div> <CardButton secondary>LEARN MORE</CardButton> </Div> </Card> </CardWrapper> </> ); }

위의 코드 블록에서는 CardWrapper 구성 요소를 사용하여 모든 Card 구성 요소를 래핑하고 다음으로 새 구성 요소 CardContent 를 추가하여 각 카드 구성 요소의 모든 콘텐츠를 래핑하는 데 사용합니다. CardButton 컴포넌트는 Grommet의 카드에 사용되는 버튼 컴포넌트입니다.

다음으로 styled-components를 사용하여 애플리케이션에 대한 스타일을 생성해 보겠습니다. 아래 파일을 작성하십시오.

 const primaryGradient = "linear-gradient(hsl(236, 72%, 79%), hsl(237, 63%, 64%))"; const CardWrapper = styled.div` display: flex; justify-content: center; align-items: center; height: max-content; margin: 20px; @media all and (max-width: 1240px) { flex-direction: column; } `;

위에서 우리는 우리 애플리케이션에서 CardWrapper 에 대한 스타일 객체를 정의했습니다. 위의 Card 구성 요소에 대한 스타일 개체를 추가해 보겠습니다.

 const Card = styled.div` min-width: 380px; box-shadow: 3px -2px 19px 0px rgba(50, 50, 50, 0.51); border-radius: ${(props) => (props.left ? " 6px 0 0 6px" : props.right ? "0 6px 6px 0" : "6px")}; background: ${(props) => (props.secondary === undefined ? "#fff" : primaryGradient)}; padding: 25px 20px; height: ${(props) => (props.center ? "520px" : "480px")}; display: flex; justify-content: center; align-items: center; @media all and (max-width: 1240px) { margin-bottom: 20px; border-radius: 6px; height: 480px; } @media all and (max-width: 420px) { min-width: 90%; } `;

구성 요소에 더 많은 스타일을 추가해 보겠습니다.

 const CardButton = styled.div` min-width: 100%; padding: 10px 15px; min-height: 50px; box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2), 0px 0px 2px rgba(0, 0, 0, 0.2); color: ${(props) => (props.secondary !== undefined ? "#fff" : "#7c7ee3")}; background: ${(props) => (props.secondary === undefined ? "#fff" : primaryGradient)}; text-align: center; margin-top: 25px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; border-radius: 6px; `; const CardContent = styled.div` width: 100%; color: ${(props) => (props.secondary !== undefined ? "#fff" : "#000")}; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1.3px solid #eee; text-align: center; `; const Div = styled.div` min-width: 100%; `;

이 모든 작업을 완료하면 프로젝트가 아래 이미지와 비슷하게 보일 것입니다.

아래 코드 블록을 사용하여 구성 요소에 더 많은 카드를 추가해야 합니다.

 <Card center secondary> <Div> <Div> <CardContent secondary> <small>Premium</small> <h1>$788</h1> </CardContent> <CardContent secondary> <p>75 GB storage</p> </CardContent> <CardContent secondary> <p>4 Users Allowed</p> </CardContent> <CardContent secondary> <p>Send Up To 5 GB</p> </CardContent> </Div> <CardButton>LEARN MORE</CardButton> </Div> </Card> <Card right> <Div> <Div> <CardContent> <small>PRO</small> <h1>$1000</h1> </CardContent> <CardContent> <p>1TB storage</p> </CardContent> <CardContent> <p>Unlimited Users Allowed</p> </CardContent> <CardContent> <p>Send Up To 10 GB</p> </CardContent> </Div> <CardButton secondary>LEARN MORE</CardButton> </Div> </Card> </CardWrapper> </> ); }

여기에서 styled-components가 있는 사용자 지정 구성 요소를 추가하고 위에서 정의한 스타일 개체를 사용하여 Grommet 구성 요소를 래핑하고 스타일을 개선하는 두 개의 카드 구성 요소를 더 만들었습니다.

최종 가격 카드 애플리케이션은 아래 이미지와 같아야 합니다.

생산에서 그로멧 사용하기(건물 목록 앱)

다른 응용 프로그램에서 Grommet을 사용하는 방법의 예를 보기 위해 사용자가 목록 항목을 추가, 보기 및 삭제할 수 있는 간단한 앱을 빌드합니다. 내장된 React Context API를 사용하여 응용 프로그램의 상태를 관리하고 Grommet은 UI 구성 요소로, styled-구성 요소는 응용 프로그램의 스타일을 지정하는 데 사용할 것입니다.

다시 말하지만 아래 명령어를 사용하여 반응 앱을 초기화해 봅시다.

 create-react-app list-app

프로젝트 디렉토리로 cd

 cd list-app

 yarn add grommet grommet-controls grommet-icons styled-components

위의 코드 블록에서 다음을 설치했습니다.

앱 컨텍스트 구축

응용 프로그램에서 Context API를 사용하려면 여러 구성 요소에서 사용자 데이터를 공유해야 합니다. 이를 통해 애플리케이션에 대한 목록과 논리를 보유할 앱 컨텍스트를 만들 수 있습니다. Context API에 대해 자세히 알아보려면 이 문서를 확인하세요.

앱 컨텍스트를 생성하려면 먼저 애플리케이션의 src 디렉토리에 context 라는 폴더를 만들고, 다음으로 AppContext.js 라는 파일을 생성합니다. 이 파일은 모든 앱 컨텍스트에 대한 파일이 됩니다. 아래 코드 블록에서 수행하겠습니다.

 import React, { createContext, useState } from 'react'; export const Context = createContext(); const AppContext = ({children}) => { const [lists, setLists] = useState([]); const removeList = item => { let newLists = [...lists]; lists.map((list, id) => { return list === item && newLists.splice(id, 1); }); setLists(newLists); }

위의 코드 블록에서 우리는 컨텍스트 API 후크 createContext 와 useState 후크를 모두 React에서 가져왔습니다. useState 구성 요소를 사용하여 응용 프로그램의 중앙 상태를 만들었습니다. 이는 구성 요소가 다른 응용 프로그램의 컨텍스트 공급자 역할을 할 수 있도록 하기 위한 것입니다. 우리 응용 프로그램의 구성 요소. 다음으로, 항목을 매개변수로 사용하는 removeList 라는 새 변수를 만들었습니다. 확산 연산자를 사용하여 상태를 확산하고 제거하려는 항목과 동일한 객체를 분리합니다.

다음으로 위의 논리를 사용하여 애플리케이션에서 목록 항목을 추가 및 삭제하는 메서드를 생성합니다. 아래 코드 블록에서 수행합니다.

 return ( <Context.Provider value={{ lists, addToLists: (newItem) => setLists([...lists, newItem]), deleteFromList: (item) => removeList(item) }}> {children} </Context.Provider> ) } export default AppContext;

여기에서 Context.Provider 를 반환하고 자식 props를 수락합니다. 다른 구성 요소가 값 prop에 전달한 속성에 액세스할 수 있도록 이 작업을 수행하고 목록에서 사용할 lists 개체를 초기화했습니다. addToList 메서드 newItem 매개변수를 받아 애플리케이션 상태에 새 목록을 추가하고 deleteFromList 는 목록 저장소에서 항목을 제거하거나 삭제합니다.

목록 구성 요소 작성

이 섹션에서는 UI 구성 요소에 Grommet을 사용하고 UI의 일부에 스타일을 지정하는 styled-components를 사용하여 List 구성 요소를 빌드할 것입니다. 먼저, 애플리케이션 src 디렉토리 안에 컴포넌트 폴더를 생성한 다음 컴포넌트 폴더 안에 새로운 List.js 파일을 생성하고 그 안에 아래 코드를 작성하세요.

 import React from "react"; import styled from "styled-components"; import { Card, CardBody, Box, Text, Button } from "grommet"; function List(props) { return ( <StyledDiv> <Card> <CardBody className="card_body"> <Box direction="row" className="item_box"> <Text className="text">{props.list}</Text> <Box className="button_box"> <Button onClick={props.deleteList.bind(this, props.list)} className="button" > Delete </Button> </Box> </Box> </CardBody> </Card> </StyledDiv> ); } export default List;

위의 코드에서 우리는 먼저 그로밋에서 Card, CardBody, Box, Text 및 Button 구성 요소를 가져왔습니다. 다음으로 Grommet 구성 요소를 사용하여 소품을 가져올 List 구성 요소를 만들었습니다. 삭제 버튼이 자동으로 추가되는 카드 구성 요소를 만들었습니다. 목록. 다음은 아래 구성 요소의 스타일을 지정하는 것입니다.

 const StyledDiv = styled.div` .button { background-color: #8b0000; color: white; padding: 10px; border-radius: 5px; } .card_body { padding: 20px; margin-top: 20px; } .item_box { justify-content: space-between; } .text { margin-top: auto; margin-bottom: auto; } `;

위의 작업을 수행하면 구성 요소가 아래 이미지와 같이 보일 것입니다.

목록 표시 구성 요소 빌드

이 구성 요소는 우리가 추가한 모든 목록을 표시하고 새 목록이 추가되자마자 자동으로 삭제 버튼을 생성합니다.

 import React from "react"; import List from "./List"; import { Context } from '../context/AppContext'; function ListDisplay() { return ( <Context.Consumer> {(context) => ( <div className="container"> {context.lists.length ? context.lists.map((list, id) => ( <List key={id} list={list} deleteList={context.deleteFromList} /> )) : null } </div> )} </Context.Consumer> ); } export default ListDisplay;

이 구성 요소에서 ListDisplay 함수를 만들고 appContext 구성 요소의 Context.Consumer 를 사용하여 래핑했습니다. 다음으로 컨테이너 태그에 div 를 사용하고 앱 컨텍스트에서 list 및 deleteList 메서드를 구조화 해제했습니다. 이렇게 하면 다음을 수행할 수 있습니다. 소품으로 전달합니다. 다음으로 목록을 매핑하여 새 lists 을 반환합니다. 반환된 개체를 List 구성 요소에 소품으로 전달하여 단일 목록을 작성하는 데 사용할 수 있습니다.

목록이 추가된 구성 요소는 다음과 같아야 합니다.

NavBar 구성 요소

이 구성 요소는 응용 프로그램의 대부분이 될 것입니다. 여기서는 Context.Consumer 를 사용하여 구성 요소를 구성하고 다른 구성 요소와 유사하게 스타일 지정을 위해 스타일이 지정된 구성 요소로 스타일을 지정합니다. 아래에서 이 구성 요소를 빌드해 보겠습니다.

 import React, { useState } from "react"; import { Heading, Form, TextInput, Button } from "grommet"; import styled from "styled-components"; import { Context } from '../context/AppContext'; function Navbar() { const [value, setValue] = useState(""); return ( <Context.Consumer> {store => ( <StyledDiv className="container"> <Heading className="title">Grommet List App</Heading> <Form onSubmit={() => store.addToLists(value)} className="form-group"> <TextInput className="form" value={value} type="text" onChange={(e) => setValue(e.target.value)} placeholder="Enter item" /> <Button type='submit' className="button">Add to List</Button> </Form> </StyledDiv> )} </Context.Consumer> ); } const StyledDiv = styled.div` .button { margin-top: 10px; background-color: purple; color: white; padding: 10px; border-radius: 5px; } `; export default Navbar;

먼저 응용 프로그램 컨텍스트 공급자의 속성에 액세스하기 위해 구성 요소를 Context.Consumer 구성 요소에 래핑했습니다. 다음으로, Grommet에서 Heading 태그를 추가한 다음 값 매개변수(이 경우 값은 사용자 입력)를 addToList 메서드를 사용하여 목록을 추가하기 위한 입력 양식을 만들었습니다. 마지막으로 양식 제출을 처리하기 위해 제출 버튼을 추가했습니다.

올바르게 완료되면 앱은 다음과 같아야 합니다.

결론

이 기사에서 우리는 반응성과 접근성을 염두에 둔 구성 요소 라이브러리인 Grommet에 대해 배웠습니다. 또한 Grommet과 목록 응용 프로그램을 사용하여 가격 구성 요소 응용 프로그램을 만드는 과정을 거쳤습니다. 다음 React 애플리케이션에 필요한 구성 요소와 UI 요구 사항에 대해 Grommet을 사용하여 재미있게 보내십시오. Grommet 목록 응용 프로그램의 코드는 Codesandbox에서 찾을 수 있으며 가격 구성 요소는 여기에서 찾을 수 있습니다.

자원

• 그로멧 문서
• 그로밋 소개
• React의 컨텍스트 API 소개