[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지26회차 미션

패스트캠프 프론트앤드 인강 25일차 리액트 컴포넌트 스타일링 sass로 아웃라인 props, rest props전달하기를 배워보았다.

아웃라인과 fullwidth(width:100%)가 추가된모습

Button.js에서 outline과 fullwidth props를 추가한다.

true혹은 false냐를 묻는 boolean값이므로 객체형태로 classNames라이브러리에 추가한다.

그래서 만약 outline값이 true일경우 들어가게되고 false일경우 반영되지않게된다.

import React from "react";
import "./Button.scss"
import classNames from 'classnames';

export default function Button({children, size, color, outline, fullwidth}){
return <button className={classNames('Button', size, color, {outline, fullwidth})}>{children}</button>
}

이제 스타일을 씌워주자.

Button.scss

$blue: #228be6; 
$grey: #495057;
$pink: pink; 

@mixin button-color($color){ 
    background: $color; 
    &:hover{ 
        background:lighten($color, 10%) } //색상을 10%밝게해준다 
    &:active{ 
        background:darken($color, 10%) } 
    &.outline{
        color:$color;
        background:none;
        border:1px solid $color;
        &:hover{
            background: $color;
            color:white;
        }
    }
} 

.Button{ 
    display:inline-flex; 
    align-items: center; 
    justify-content: center; 
    color:#fff; 
    font-weight: bold; 
    outline: none; 
    border:none; 
    border-radius:4px; 
    cursor: pointer; 
    padding-left:1rem; 
    padding-right:1rem; 
    
    &.large{ 
        height:3rem; 
        font-size:1.25rem; 
    } &.medium{ 
        height:2.25rem; 
        font-size:1rem; 
    } &.medium{ 
        height:2.25rem; 
        font-size:0.8rem; 
    } 
    
    //중복되는애들은 mixin을 사용한다. 
    &.blue{ background: $blue; 
        &:hover{ background:lighten($blue, 10%) } //색상을 10%밝게해준다 
        &:active{ background:darken($blue, 10%) } 
    } 
    
    &.grey{ 
        @include button-color($grey); 
    } 
    &.pink{ 
        @include button-color($pink); 
    } 
    & + &{margin-left:10px;}
    
    &.fullwidth{
        width:100%; 
        justify-content: center;
    
        //버튼 버튼 함께있을경우
        & + &{
            margin-left:0;
            margin-top: 10px;
        }
    }
} 
//오른쪽에있는애한테 특정스타일을 넣겠다라는뜻 
// .Button + .Button{ margin-left:1rem; }

App.js

outline과 fullwidth props에서 '={true}'를 생락할수있다.

import React from 'react';
import "./Button.scss"
import Button from './Button';

function App() {
  return (
    <div className="App">
      <Button size="large" color="grey" outline={true}>
        버튼입니다
      </Button>
      <Button size="medium" color="pink" outline fullwidth>
        버튼입니다
      </Button>
    </div>
  );
}

export default App;

 

버튼에 ...rest props전달하기

만약 아래와같이 onclick을 추가하여도 아무일도 일어나지않을것이다. 

App.js

      <Button size="medium" color="pink" outline fullwidth onclick={()=>console.log('클릭!')}>
        버튼입니다
      </Button>

이벤트가 실행되게하려면 Button.js에 props로 받아와서 넘겨줘야한다.

import React from "react";
import "./Button.scss"
import classNames from 'classnames';

export default function Button({children, size, color, outline, fullwidth, onClick}){
return <button className={classNames('Button', size, color, {outline, fullwidth})} onClick={onClick}>{children}</button>
}

하지만 매번 이벤트들을 설정할때마다 같은방법으로하면 매우 번거롭기때문에

...rest props를 사용한다.

import React from "react";
import "./Button.scss"
import classNames from 'classnames';

export default function Button({children, size, color, outline, fullwidth, ...rest}){
    console.log(rest);
return <button className={classNames('Button', size, color, {outline, fullwidth})} >{children}</button>
}

rest는 children,size,color,outlines,fullwidth외 나머지것들을 의미하므로 rest를 콘솔창에 출력해볼경우 App.js에서 썻던 이벤트가 뜨는것을 확인할수있다.

이제 잘작동하게하려면 console.log()내용을 지우고 버튼 태그안에 {...rest}만 집어넣으면된다.

 

또한가지팁! 재사용성이높은 커스텀버튼을 제작하려면 classNames를 같은방법으로 불러와 넣어주면된다.

import React from "react";
import "./Button.scss"
import classNames from 'classnames';

export default function Button({children, size, color, outline, fullwidth, className, ...rest }){
    // console.log(rest);
return <button 
    className={classNames(
    'Button', 
    size, 
    color, 
    {
        outline, fullwidth
    },
    className
    )} 
    {...rest}>{children}</button>
}

import React from 'react';
import "./Button.scss"
import Button from './Button';
import "./App.scss"

function App() {
  return (
    <div className="App">
      <Button size="large" color="grey" outline={true} className="costomized">
        버튼입니다
      </Button>
      <Button size="medium" outline fullwidth className="costomized" onClick={() => {console.log('클릭!')}}>
        버튼입니다
      </Button>
    </div>
  );
}

export default App;

App.scss

.App{
    .costomized{background: black;}
}

검정색으로 커스터마이징된 버튼

https://bit.ly/31Cf1hp

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스