React에서 재사용 가능한 메쉬 시스템 만들기

격자 시스템은 사이트를 구축하는 가장 가치 있는 레이아웃 도구라고 할 수 있다.만약 그것이 없다면, 응답식 레이아웃은, 응, 응답하지 않을 것이다.
나는 React를 자주 사용하기 때문에 React 프로그램에서 다시 사용할 수 있는 격자 시스템을 만들기로 결정했다.그것은 처음에는 개인적인 도구였지만, 내가 그 중에서 더 많은 사용을 얻게 됨에 따라, 나는 그것을 다른 개발자에게 사용하도록 발표하기로 결정했다.
그래서 해냈어.그것은 React 마이크로 격자라고 하는데 12열의 격자 시스템으로 매우 편리하다.너는 그것을 찾을 수 있다 here.
그러나 오늘 우리는 한 걸음 한 걸음 그것을 재건할 것이다. 그러면 너는 그것을 어떻게 지었는지 계속 볼 수 있을 것이다.

설치 프로그램
우리는 양식화된 구성 요소를 사용하여 격자 시스템을 설계할 것이다.설치하라고.

$ npm install --save styled-components

현재 의존 항목이 설치되어 있습니다. 두 개의 파일을 만들 것입니다. 하나는 줄 구성 요소이고, 다른 하나는 열 구성 요소입니다.

$ touch Row.js Column.js

기본 메쉬 기능
우선, 우리는 모든 항목이 같은 폭을 가지고 그것들을 포장할 수 있는 기본적인 flex 패키지를 만들 것이다.

행 어셈블리 생성하기
우리 줄에 있어.js 파일, 우리는 기본적인 줄 구성 요소를 개술할 것입니다.

import  React  from  'react';
import  styled, { css } from  'styled-components';
import { Column } from  './Column';

export const Row = ({children}) => {
  return (
    <Wrapper>
      {React.Children.toArray(children).map((item) => {
        return (
          item && (
            <Column>
              {item.props.children}
            </Column>
          )
        );
      })}
    </Wrapper>
  );
};

const  Wrapper = styled.div`
  @media (min-width: 769px) {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 0 -8px 0 -8px
  }
`;

분석해 봅시다.
기본 기능에 대해, 우리는 이 구성 요소의 children 를 비추고, 그것들을 각각 일렬로 설정할 것이다. (이따가 우리는 그것들에 대해 스타일 설정을 할 것이다.)

{React.Children.toArray(children).map((item) => {
  return (
    item && (
      <Column>
        {item.props.children}
      </Column>
    )
  );
})}

격자 기능을 추가하기 위해서, 우리는 <Wrapper>를flex 요소로 설정하기만 하면 된다.

const  Wrapper = styled.div`
  @media (min-width: 769px) {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 0 -8px 0 -8px;
  }
`;

화면 크기가 769px를 초과하면 격자 시스템을 활성화합니다.그리고 우리는 디스플레이를 flex로 설정합니다.
또한 열의 간격을 설명하기 위해 음수 여백을 추가했습니다(나중에 스타일 설정).

margin: 0 -8px 0 -8px;

열 어셈블리 생성하기
이제 줄 구성 요소가 생겼습니다. 열 구성 요소의 스타일을 설정해야 합니다.
우리 칼럼에서js 파일, 기본적인 열 태그와 스타일을 만들 것입니다.

import  React  from  'react';
import  styled, { css } from  'styled-components';

export const Column = ({children}) => {
  return (
    <Wrapper>{children}</Wrapper>
  );
};

const Wrapper = styled.div`
  flex: 1 1 0;
  width: 100%;
  padding: 8px;
`;

지금 우리가 해야 할 일은 이 열이 형제처럼 크기를 조절할 수 있도록 하는 것이다.이것은 flex 속성을 사용하여 실현된 것이다.

flex: 1 1 0;

우리는 또한 매 열에 8px의 충전을 추가했다.만약 당신이 기억하고 있다면, 이것이 바로 우리가 첨가한 Row 부분의 마이너스 이윤량이다.열의 모서리가 모 컨테이너의 모서리와 교차하도록 하기 위해서입니다.

사용자 정의 브레이크 지원
지금까지 우리는 이미 자동 전력망 시스템을 가지고 있다.이 열들은 모바일에서 전체 너비로 크기를 조정했습니다.
그러나 진정한 격자 시스템은 사용자 정의 단점을 지원한다.그럼 우리 지금부터 시작합시다.Row.js 파일에서 우리는 breakpoints 도구를 받아들일 것이다. 기본값은 769이다.

export const Row = ({children, breakpoints = [769]}) => {
  ...
};

현재, 우리는 이 단점 그룹을 사용하여 격자를 언제 활성화할지 결정할 수 있습니다.이를 위해, 우리는 breakpoints 수조 중의 첫 번째 항목을 <Wrapper> 구성 요소에 전달할 것입니다.

export const Row = ({children}) => {
  return (
    <Wrapper breakpoint={breakpoints[0]}>
      ...
    </Wrapper>
  );
};

그리고 769px 미디어 조회를 템플릿 텍스트로 대체합니다. 템플릿 텍스트는 스타일링 구성 요소가 지원합니다.이것은 우리가 단점 값을 사용할 수 있도록 허락한다.

const  Wrapper = styled.div`
  @media (min-width: ${props => props.breakpoint}px) {
    ...
  }
`;

현재, 우리는 사용자 정의 단점을 Row 구성 요소에 전달할 수 있습니다.

<Row breakpoints={[960]} />

근데 뭐가 멋있는지 알아요?
열 너비를 사용자화합니다.각 브레이크에 대해🤯
우리 지금 시작합시다!

너비 사용자정의Column.js 파일의 내부로 돌아가서 우리는 두 개의 새로운 도구를 받아들여야 한다. 첫째, 하나의 breakpoints 그룹이 부모Row 구성 요소에서 전달된다.그 다음은 widths 수조로 몇 열을 차지할지 정의할 수 있는 숫자 수조를 포함한다.

export const Column = ({children, breapoints, widths = ['auto']}) => {
  ...
};

Note: we used a default value of auto for the widths: this will allow the column to take up whatever space is available, in case we forget to pass in a widths prop.

현재, 우리는 세 개의 사용자 정의 단점과 너비를 지원하기 위해 격자 시스템을 설정하고 있다.그러나, 이 세 개의 매개 변수에 기본값이 있는지 확인해서, 우리가 값을 전달하는 것을 잊어버리지 않도록 해야 한다.Column 구성 요소의 맨 위에 이 변수를 추가합니다.

const  breakpointOne = breakpoints[0];
const  breakpointTwo = breakpoints.length >= 1 ? breakpoints[1] : null;
const  breakpointThree = breakpoints.length >= 2 ? breakpoints[2] : null;

const  widthOne = widths[0];
const  widthTwo = widths.length >= 1 ? widths[1] : null;
const  widthThree = widths.length >= 2 ? widths[2] : null;

기본적으로 우리가 해야 할 일은 세 개의 너비 값이 있는지 검사하는 것이다.없으면 세 번째 값을 이전 너비로 설정합니다.이렇게 하면 우리의 전기망이 붕괴되지 않을 것이다.
현재, 우리는 이 값을 도구로 열 <Wrapper> 구성 요소에 전달해야 한다.

export const Column = ({children, breakpoints, widths = ['auto']}) => {
  return (
    <Wrapper
      breakpointOne={breakpointOne}
      breakpointTwo={breakpointTwo}
      breakpointThree={breakpointThree}
      widthOne={widthOne}
      widthTwo={widthTwo}
      widthThree={widthThree}
    >
      {children}
    </Wrapper>
  );
};

이것은 특정한 단점에 따라 열의 폭을 변경할 수 있도록 합니다.Wrapper 스타일의 구성 요소에 미디어 조회를 추가합니다.

const Wrapper = styled.div`
  flex: 1 1 0;
  width: 100%;
  padding: 8px;

  // ACTIVE BETWEEN BREAKPOINT ONE AND TWO (OR 9999PX)
  @media(min-width: ${props => props.breakpointOne}px) and
  (max-width: ${props => props.breakpointTwo | 9999}px) {
    width: ${props => props.widthOne !== 'auto'
      ? `${(props.widthOne / 12) * 100}%`
      : null};
    flex: ${(props) => (props.widthOne !== 'auto' ? 'none !important' : null)};
  }

  // ACTIVE BETWEEN BREAKPOINT TWO AND THREE (OR 9999PX)
  @media(min-width: ${props => props.breakpointTwo}px) and
  (max-width: ${props => props.breakpointThree | 9999}px) {
    width: ${props => props.widthTwo !== 'auto'
      ? `${(props.widthTwo / 12) * 100}%`
      : null};
    flex: ${(props) => (props.widthTwo !== 'auto' ? 'none !important' : null)};
  }

  // ACTIVE BETWEEN BREAKPOINT THREE AND UP
  @media(min-width: ${props => props.breakpointThree}px) {
    width: ${props => props.widthThree !== 'auto'
      ? `${(props.widthThree / 12) * 100}%`
      : null};
    flex: ${(props) => (props.widthThree !== 'auto' ? 'none !important' : null)};
  }
`;

그래.이곳에는 볼 만한 곳이 많다.
우리가 확보해야 할 첫 번째 일은 미디어 조회에 하나를 추가하는 것이다. max-width너비 값이 자동일 때 속성flex이 재설정되지 않도록 하기 위해서입니다.
우리가 주의해야 할 주요 문제는 열의 폭을 계산하는 함수이다.우리는 12열 격자를 사용하기 때문에, 우리는 너비 (1-12 사이의 값) 를 취하고, 그것을 12로 나누어서 이 값을 얻는다.우리는 이 숫자를 100을 곱해서 이 백분율을 얻는다.

width: ${props => props.widthThree !== 'auto' ? `${(props.widthThree / 12) * 100}%` : null};

우리는 또한 너비 값을null로 설정하여 열의 너비가 자동일 때 너비가 100%가 되도록 하는 삼원 연산자를 추가했다.
현재 우리가 해야 할 마지막 일은 단점을 Row 구성 요소에서 Column 구성 요소로 전달하는 것이다.Row.js 파일에서return 문장을 업데이트할 것입니다.

return (
  {React.Children.toArray(children).map((item) => {
    return (
      item && (
        <Column
          breakpoints={breakpoints}
          {...item.props}
        >
          {item.props.children}
        </Column>
      )
    );
  })}
)

그리고 비올라!현재, 우리는 격자 시스템을 위해 사용자 정의 단점과 너비를 사용할 수 있다.

<Row breakpoints={[576]}>   
 <Column widths={[4]} />  
 <Column widths={[8]} />  
 <Column widths={[3]} />  
 <Column widths={[9]} />  
 <Column widths={[7]} />  
 <Column widths={[5]} />  
</Row>

결론
이제, 우리는 기능이 완비된 React 격자 시스템이 생겼다.사용자 정의 간격, 간격띄우기 등 더 많은 기능을 원한다면 React Tiny Grid를 보십시오.
너는 Github에서 이 격자 시스템의 전체 코드를 찾을 수 있다.
만약 당신이 이 강좌를 좋아하고 React Tiny Grid가 매우 유용하다는 것을 발견한다면 buy me a coffee할 수 있다면 저는 감격해 마지 않을 것입니다!
격자 시스템에 대한 의문이나 개선이 있으면 아래에서 논평을 할 수 있습니다.