전체 글
CSS Module 사용해보기
리액트 프로젝트를 새로 생성합니다 생성 후 추가적으로 라이브러리를 설치할 필요는 없습니다 내장에 포함되어있고, 명칭만 .module.css 로 생성합니다 $ npm run start src 폴더에 components 폴더 생성 후 CheckBox.js 파일을 만들어줍니다 먼저 컴포넌트 틀을 잡아줍니다 import React from 'react' function CheckBox() { return ( ) } export default CheckBox input을 만들어주고 props로 checked값을 가져옵니다 function CheckBox({ checked }) { return ( ); } 만약에 checked 값이 true 라면 "체크" 라고 보여줍니다 그렇지 않으면 '체크 안됨' 이라고 보여줍니..
CSS Module
리액트에서 컴포넌트 스타일링을 할 때 CSS Module를 사용하면 className 중복을 방지할 수 있습니다 CSS Module를 사용할 땐 .module.css 으로 작성합니다 //Button.module.css .Button { display: inline-flex; align-items: center; justify-content: center; color: white; padding: 2rem; } 이렇게 만들어놓은 박스가 있다고 가정해봅시다 임포트를 해서 불러오는건 맞지만 약간의 방식의 차이가 있습니다 원래대로라면 이런식으로 작성하죠 import "./Button.scss"; 하지만 CSS Module를 불러올 땐 이렇게 작성합니다 import styles form "./Button.modu..
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 설정
기존 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 구현
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 기능 구현
버튼의 다양한 사이즈를 선택할 수 있게 구현 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 사용하는 방법
리액트 설치 후 경로에서 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
조건문을 이용해서 각각 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..