[React] 최소단위 컴포넌트 만들기 - Gird

1. 최소단위 컴포넌트 만들기 준비

 * 최소 컴포넌트 단위에 기본 스타일을 잡아줄거기때문에 패키지를 우선 설치해주자.

 

    yarn add styled-components

 

2. Grid 잡기

그리스 시스템은 기획서에 나와있는 동일한 여백 등을 처음에 잡아준다면 매 페이지 마다 수정해 줄 필요가 없다.

 

* 예제 코드

import React from "react";

import styled from "styled-components";

 

const Grid = (props) => {

       const { is_flex, width, margin, padding, bg, children } = props;

       const styles = { is_flex: is_flex, width: width, margin: margin, padding: padding, bg: bg, };

 

     return (

     <React.Fragment>

           <GridBox {...styles}>{children}</GridBox>

      </React.Fragment>

      );

};

 

Grid.defaultProps = {

     chidren: null,

     is_flex: false,

     width: "100%",

     padding: false,

     margin: false,

     bg: false,

};

 

const GridBox = styled.div`

      width: ${(props) => props.width};

      height: 100%;

      box-sizing: border-box;

      ${(props) => (props.padding ? `padding: ${props.padding};` : "")}

      ${(props) => (props.margin ? `margin: ${props.margin};` : "")}

      ${(props) => (props.bg ? `background-color: ${props.bg};` : "")}

      ${(props) => props.is_flex ? `display: flex;

      align-items: center; justify-content: space-between; ` : ""} `;

 

export default Grid;

 

 

3. Grid 코드 작성 내용

- 기본 뼈대 코드

import React from "react";

import styled from "styled-components";

 

const Grid = (props) => {

 

       return (

         <React.Fragment>

 

         </React.Fragment>

       )

}

 

Grid.defaultProps = {

  

}

 

- Grid 레이아웃에 필요한 기본값들을 먼저 설정해준다.

  → flex , padding, margin, backgroud 등등

 

Grid.defaultProps = {

     children: null 

     is_flex: false,

     width: "100%",

     padding: false,

     margin: false,

     bg: false,

};

 

- props로 설정한 값들을 가지고 와야한다. 

 

const { is_flex, width, margin, padding, bg, children } = props;

 

- styled-components 를 통해 스타일을 잡아준다.

 

const GridBox = styled.div`

      width: ${(props) => props.width};

      height: 100%;

      box-sizing: border-box;    

      // border-box 는 넓이에 padding, 선굵기 등등 모두 포함시킨다는 의미이다. 

      ${(props) => (props.padding ? `padding: ${props.padding};` : "")}

      ${(props) => (props.margin ? `margin: ${props.margin};` : "")}

      ${(props) => (props.bg ? `background-color: ${props.bg};` : "")}

      ${(props) => props.is_flex

           ?`display: flex; align-items: center; justify-content: space-between; `

           : ""} `;

      // justify-content : space-between 은 양쪽끝으로 정렬하는 속성 

 

* props를 통해 데이터를 가져오는 방법에 대해 기억해두자.

  →${(props) => props.[데이터]};

 

* padding, margin, bg, flex 등은 값이 있을수도있고 없을수도있기때문에 삼항연산자로 없을경우에는 빈값으로 넘겨주면된다.

   * 기본 뼈대코드 : ${(props) => (props.[값]? `` : ""}

   * 예제코드 :  ${(props) => (props.padding ? `padding: ${props.padding};` : "")}

 

- 실제코드에 적용하기 

return (

     <React.Fragment>

           <GridBox {...styles}>{children}</GridBox>

      </React.Fragment>

      );

여기에서 기본 코딩한 스타일을 {...props}로 작성을 하여 모두 넘겨줄 수 도 있지만!

props에는 스타일을 담당하지않는 children 속성이 추가가 되었다. (깔끔한 코드 작성을 위해 스타일에 해당하는 녀석들만 넘겨주자)

 

const styles = { is_flex: is_flex, width: width, margin: margin, padding: padding, bg: bg, };

→ return 바깥에 styles에 해당하는 녀석들을 선언해주고 "<GridBox {...styles}> 로 넘겨주면된다. 

 

children 속성 : <> 와 </> 사이에 입력한 요소들이며, 자식요소이다. 

예를들어, 아래와같이 작성을 하게되면은 <div>가 children 자식요소로 넘어가게되는거다. 

 

<React.Fragment>

     <Grid>

        <div>example</div>

      </Grid>

</React.Fragment>

 

- Grid를 다른 컴포넌트에서 사용

 

export default Grid;