Button 컴포넌트 꾸며보기

오늘 우리가 만들어 볼 버튼은 아래와 같다. 어떻게 하면 아래와 같은 버튼을 만들 수 있을까?

 

Button

 

src 폴더 안에 Button.js와 Button.scss 파일을 추가해준다. 

 

Button.js  Button.scss

 

 

 

 

 

 

Button.js 파일에는 아래와 같이 작업을 해준다.

 

import React from 'react';

import './Button.scss';




function Button({children}){



    return( <button className="Button">{children}</button>);



}



export default Button;

 

 

 

 

 

 

Button.scss에는 아래와 같이 작업을 해준다.

$blue: #228be6;// scss에서 변수를 정의할 경우 $를 사용한다

.Button{
    display: inline-flex;
    color: white;
    font-weight: bold;
    outline: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;

    height: 2.25 rem;
    padding-left: 1rem;
    padding-right: 1rem;

    font-size: 1rem;

    background: $blue;

    &:hover{//마우스를 올리면 반응한다.
        background: lighten($blue, 10%);
    }

    &:active{//클릭하면 활성화된다.
        background: darken($blue, 10%);
    }
    
}

 

 

 

 

 

 

 

여기서 잠깐 필자는 scss를 다루는데 좋은 사이트를 한 가지 추천하려한다. 바로 아래의 사이트이다. 

 

https://flexboxfroggy.com

Flexbox Froggy

 

 

다시 본론으로 돌아와서, src 폴더에 기존에 있던 App.css를 삭제하고 App.scss를 새롭게 추가하여 아래와 같이 작성하여 저장한다.

 

 

 

.App{
    width: 512px;
    margin: 0 auto;
    margin-top: 4rem;
    border: 1px solid black;
    padding: 1rem;// 1rem=16px
    
}

 

 

마지막으로 App.js 파일에서 Button 컴포넌트를 실행할 수 있도록 불러오면 된다.

 

import React from 'react';

import './App.scss';
import Button from './Button.js';


function App() {

  return (

    <div className="App">
      <div className="buttons">
        <Button> button</Button>
      </div>
    </div>

  );

}

export default App;

 

이제 실행에 필요한 모든 파일의 작성을 끝냈다. 터미널을 열고 yarn start 를 입력해보자. 그러면 우리가 원하는 화면이 띌 것이다.