리액트 프로젝트 1.최소컴포넌트 잡기

elements 폴더에서 쓸 만한 button, input, grid 등 유지 보수가 쉽고 기본적인 템플릿을 만들자

1. 

react-router-dom , styled-components 설치 후

app.js에서 사용할 페이지들을 연결하자

2. 페이지에 필요한 컴포넌트들을 생각하고 컴포넌트 파일을 생성에 해당 페이지에 컴포넌트들을 넣자

3. 컴포넌트에 필요한 최소 단위 컴포넌트들을 넣고 elements폴더에 최소 단위 컴포넌트들을 만들자

4.

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 = {

children:null,

is_flex: false,

width: "100%",

padding: false,

margin: false, //만약에 패딩과 margin의 값이 있으면 그거 그대로 들어가게 하기 위한 설정

bg:false,

}

 

const GridBox = styled.div `

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

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.Grid.default Props = {   } 에 들어갈 css 항목을 만든다. children, width, padding, margin, 등  특히 margin:false같은 불린 연산자는 margin값이 만약에 존재하면 사용하고 존재하지 않으면 사용하지 않게 만드는 것이다

 

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

함수 안에 props에 css요소들을 초기화 선언을 해야한다

3. const styles = {

is_flex : is_flex,

width: width,

margin: margin,

padding: padding,

bg: bg,

}

styles라는 객체에 다시 초기화한 선언들을 다 모아넣는다

 

4.

<GridBox {...styles}>

{children}

</GridBox>

jsx문법으로 하나의 돔에 다시 넣는다 그리고 GridBox에는 {..styles}를 넣어 defaulProps를 넣어준다

 

 

 

 

 

 

최소범위 컴포넌트 응용

1.조건문을 통해 타입이 다른 것을 활용 할 수 있다. 

if(shape ==="circle")

{

return(

<ImageCircle {...styles}>

 

</ImageCircle>

)

}

else

{

return (

<AspectOutter>

<AspectInner {...styles}></AspectInner>

</AspectOutter>

 

)

}

}

shape라는 값을 통해 shape가 "circle"일 때와 아닐 때로 이미지를 가공할 수 있다

 

2. 

최소단위 컴포넌트에서 수정하지 않고 각각 페이지에서 지정하게 하는 법

const GridBox = styled.div `

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

 

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` : ""}

`

삼항연산자를 활용하면된다

${(props) => props.is_flex?`display: flex; align-items: center; justify-content: space-between` : ""}

defaultProps에 false로 주고

그 뒤에 만드는 styled에서 ${(props)=> props.해당cssKEY?`키: ${props.키}`: ' '=빈 공간}

이렇게 만드면 그 때 그 때 활용할 수 있다.

 

3. onChange 나 onClick

이런 것도 styled component에 등록을 안 시키면 다른 파일에서 최소단위 컴포넌트를 사용할 수 없을 수도 있다

Input.defaultProps = {

multiLine: false,

label: "텍스트",

placeholder: "텍스트를 입력해주세요.",

type: "text",

_onChange: () => {},

};

이럴 때는 defaultProps에 _을 이용해서 이렇게 표현해주고 

const {_onChange} = props를 해주고 

<ElInput type={type} placeholder={placeholder} onChange={_onChange} margin="10px" width="50%"/>

onChange = {_onChange}로 넣어주면 된다