scss 이용해보기

이번에는 scss를 이용하여

버튼 3개에 색상을 지정해주고

버튼을 눌렀을 경우와 

버튼 위에 마우스를 올렸을 경우 

버튼의 색이 바뀌도록 해보겠다.

Button.scss 파일

우선은 사용할 색상을 변수화 시켜주었으며

버튼을 눌렀을 경우와

마우스가 버튼 위로 올라갔을 경우를 대비한 함수를 생성해주었다.

 

Button.scss 파일

다음으로는 Button이라는 아이디를 가진

버튼을 위한

각종 너비 및 생상 등을 지정해주었으며

버튼의 크기에 따른 설정들을 지정해주었다.

Button.scss 파일

 

 

Button.scss 파일

다음으로는 변수화 시킨 각 색상들에게

앞서 선언했던 함수를 적용시켜준다.

그리고 버튼이 서로서로 너무 붙어있을 경우를 대비해

버튼간의 거리가 1rem정도를 유지하도록 만들어주었다.

 

App.scss 파일

다음으로는 App이라는 아이디에 적용시켜 줄

css 코드를 구현하였다.

 

 

App.js 파일

App.js 파일에서는 각각 다른 크기와

다른 색상을 가진 3개의 버튼을 생성해주었다.

 

 

그리고 Button.js 파일에서는

Children과 size, color을 매개변수로 받는

함수형 컴포넌트 Button을 선언해주었다.

7, 8, 9, 10번줄의 코드들은

같은 기능을 하는 코드들이며

편한 것으로 골라 사용하면 된다.

 

 

index.js 파일

그리고 이걸 실행시켜보기 위해

다음과 같이 입력시켜보았다.

 

실행시켜보니

다음과 같이 각각 크기와 색상이 다른 버튼 3개가

출력되는 모습을 볼 수 있었다.

첫번째 버튼 위에 마우스를 올려보니

위의 사진과는 색상이 약간 변한것을 확인할 수 있었다.

 

 

오늘의 가장 중요했던 점은 classnames라는 기능을 사용하기 위해선

npm install classnames라는 명령어를 통해

classnames를 설치해야 한다는 점,

이 기능을 사용하지 않고도 

기능을 사용한것과 같은 결과가 나오도록

출력시킬 줄 알아야 한다는 것이라고 생각한다.