STYLE SHEET
![React에서 Sass ...rest props 사용 방법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbBIAvN%2FbtrFVhBKxR5%2FmEk1A8tThlCSxFpKi51KDK%2Fimg.jpg)
React에서 Sass ...rest props 사용 방법
onClick={() => { console.log("클릭"); }} 만약에 이렇게 onClick을 작성해도 버튼 기능은 활성화되지 않습니다 그 이유는 Button.js에서 props를 생성 후에 받아와야합니다 즉 onClick를 활성화 하려면 Button.js에서 추가적으로 props설정 후 이벤트를 활성화합니다 function Button({ children, size, color, outline, fullWidth, onClick, onMouseMove, }) {children} 하지만 만약 모든 이벤트에 대해 설정하는건 비효율적으니 ...rest를 사용합니다 먼저 Props와 button classNames에서 두개를 없애고 ...rest로 바꿔줍니다 function Button({ childre..
![React에서 Sass 추가 Props 설정](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbASVBm%2FbtrFVUlNRc8%2FhDHhLk4mQl5BhXSspFi9A1%2Fimg.jpg)
React에서 Sass 추가 Props 설정
기존 props에서 outline, fullWidth props를 추가 Button.js에서 추가 function Button({ children, size, color, outline, fullWidth }) outline, fullWidth는 조건부이며, true or false에 따라 스타일에 들어갑니다 객체로 생성해줍니다 className={classNames("Button", size, color, { outline, fullWidth, })} 만약 props로 받아온 outline 값이 true라면 className에 outline값이 들어가게됩니다 boolean은 값이 없으면 undefined고 undefined라면 classNames에서 처리하지 않습니다 Button.scss의 mixin..
![React에서 Sass color props 구현](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcKQJol%2FbtrFYxwvbSp%2FLVnJXmry5AKoWmMu8LibkK%2Fimg.jpg)
React에서 Sass color props 구현
color props 기능을 통해 버튼에 각각 다양한 색을 입혀보겠습니다 function Button({ children, size, color }) 기본 색상은 blue로 지정하겠습니다 Button.defaultProps = { size: "medium", color: "blue", }; Button.scss에서 변수를 추가 했습니다 $pink: #f783ac; $violet: #9775fa; Button.js에서 classNames의 color 값에 blue가 들어왔을 때 주면 되니까 & 연산자를 통해 자기 자신을 선택하는 blue를 만들어줍니다 {classNames("Button", size, color)} 아래 코드처럼 넣어줍니다 &.blue { background: $blue; &:hover {..
![React에서 Sass props 기능 구현](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FtzqBL%2FbtrFQXQy8XX%2F3a8Tph9EWvLRqwm7sadtZK%2Fimg.jpg)
React에서 Sass props 기능 구현
버튼의 다양한 사이즈를 선택할 수 있게 구현 Button.js에 size라는 props 생성 function Button({ children, size }) large, medium, small 총 3가지 값을 설정할 예정입니다 이렇게 하기 위해선 템플릿 리터럴을 사용합니다 지정한 size props가 large면 large className이 만들어지고 medium이면 medium className이 만들어지게끔 설정합니다 만약 넣어야 할 props가 많아지면 코드 가독성이 떨어지고 이해하기 어려우니 classNames 라이브러리를 사용합니다 classNames 라이브러리란, 버튼에 조건부 스타일링을 적용해야할 때 쉽게 적용이 가능합니다 설치 $ npm add classnames classNames를 ..
![React에서 Sass 사용하는 방법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FZYknz%2FbtrFUS8EBEL%2FsELrzAAKBhgd7r17lrmet1%2Fimg.jpg)
React에서 Sass 사용하는 방법
리액트 설치 후 경로에서 node-sass 설치 $ yarn add node-sass 해당 라이브러리는 sass로 작성된 코드를 css로 변환해줍니다 src 폴더에 components 폴더 생성 Button.js 파일 생성 import React from "react"; function Button() { return ; } export default Button; 추가 임포트 import './Button.scss'; div 요소 button으로 바꾸기 return Button 내부에 children 추가하고 랜더링 function Button({ children }) { return {children}; } className 설정 {children}; components 폴더에 Button.scss ..
![SASS - @if](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FHPZfZ%2FbtrFId0E5pS%2FbpP866UKNJbvNrXnaL3Fk1%2Fimg.png)
SASS - @if
조건문을 이용해서 각각 article 값을 바꿔보겠습니다 현재 남아 있는 코드 중 기본값만 냅두고 다 지우겠습니다 @charset "UTF-8"; @import "reset"; @import "mixin"; $bgBody: #eee; $bgItem: #fff; $colorH2: aqua; $interval: 0.2s; body { background: $bgBody; } .wrap { width: 100%; border: 2px solid #bbb; padding: 100px; display: flex; justify-content: center; perspective: 600px; .item { width: 300px; padding: 30px; background: $bgItem; margin: 50..
![SASS - @each](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F3aOlN%2FbtrFNHlD6sb%2Fj7q0sqaVnIlf0fJwMi2qNk%2Fimg.png)
SASS - @each
@for문 보다 좀 더 다양하고 기능 범용성이 있는 @each에 대해 알아보겠습니다 @for문은 반복문이 간결하고 쉽지만 숫자만 반복됩니다 &:nth-of-type(1) { a { @include button($bg: pink); } } &:nth-of-type(2) { a { @include button($bg: aqua); } } &:nth-of-type(3) { a { @include button($bg: orange); } } &:nth-of-type(4) { a { @include button($bg: lightgreen); } } 여기 값을 보면 각각 컬러값이 다르고 순서값으로 활용하기 애매합니다 하지만 @each로 처리가 가능합니다 먼저 서로 리스트가 다른걸 그룹화 시킬 수 있습니다 styl..
![SASS - @for 반복문 사용법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FrklcU%2FbtrFOxpqhhi%2FYpyrCCiBIuLcdZWMx5WhWK%2Fimg.png)
SASS - @for 반복문 사용법
반복문을 이용해서 마우스를 올렸을 때 부드럽게 시간차가 발생하며 아래에서 위로 올라오는 모션을 만들어보겠습니다 먼저 만약에 아래 코드 괄호에 아무런 값이 들어가 있지않으면 에러가 발생합니다 &:nth-of-type(1) a { @include button(); } 그러므로 기본값으로 대체할 곳이 필요한데 이때 mixin 함수에 기본값을 적용해놓습니다 @mixin button($wid: 100px 이렇게 되면 괄호에 아무것도 적지 않더라도 기본적으로 button은 100px을 가지고 있습니다 추가적으로 $bg도 넣어줍니다 그렇다면 background도 인수 값으로 변경합니다 @mixin button($wid: 100px, $bg: gray) { display: block; width: $wid; heigh..