[REACT] 컴포넌트 쪼개기/ 포스트 보이는 메인페이지 만들기 / 최소단위 컴포넌트 만들기 / Grid와 이미지 컴포넌트 (2)

최소단위 컴포넌트 만들기

1. 컴포넌트를 이루는 요소를 만들자 - Grid 잡기

 

styled-components 설치

yarn add styled-components

 

 

Grid잡기

elements 폴더에 만들어준다.

 

(1) props로 받아온 값이 없을때 기본값 설정

 

 

(2) styled-component지정

 

(3) 받아오기

Grid의 props에서부터 is_flex, width, ..등등으로 받아온다.

그리고 그 중 style에 관련된 값을 styles라는 변수에 가져온다.

그리고 GridBox한테 styles내용을 넘겨준다.

그리고 Grid안에 내용들이 보여야하기 때문에 children을 받아온다

 

코드보기

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;

 

 

 

 

---

1. 컴포넌트를 이루는 요소를 만들자 - Image 컴포넌트 만들기

프로필 사진이 보이는 동그라미 작은 이미지와

포스트에 있는 커다란 네모 이미지가 있다.

 

(1) 기본값 설정

 

(2) style component만들기

네모 이미지는 반응형이어야하기 때문에

width를 100%로 주었다.

그리고 inner네모는 padding-top을 75%주어서 4:3비율을 맞춰주었다

(이부분 무슨 말인지 모르겠음)

 

(3) 동그라미? 네모?

props에서 받아온 shape에 따라 다른 스타일을 보여준다.

 

 

(4) 포스트에서 불러와보자

 

<결과>