ALL

Styled-Components 사용방법

새 리액트 프로젝트를 생성합니다 Styled-Components를 설치합니다 $ npm install styled-components 사용하지 않는 코드는 날리고 이 상태에서 시작하겠습니다 import React from "react"; function App() { return ; } export default App; styled-components 를 사용할 땐 import를 통해 불러옵니다 import styled from "styled-components"; 컴포넌트 이름을 생성합니다 const Circle = styled.div``; 스타일을 지정합니다 const Circle = styled.div` width: 5rem; height: 5rem; background: black; border..

Styled-Components 소개

Styled-Components란 React에서 다루는 CSS in JS 라이브러리 중 가장 인기있는 라이브러리입니다 CSS in JS의 의미는 JS 안에 CSS를 작성하는 것입니다 하지만 Styled-Components 외에도 emotion, styed-jsx, jss 등 인기 있는 라이브러리도 많습니다 Styled-Components를 사용하면 파일 안에서 CSS와 JS를 한번에 바로 만들어내서 실행시킬 수 있습니다 이런식으로 작성합니다 const Button = styled.div` width: 5rem; height: 5rem; background: black; border: 1px solid black; border-radius: 1rem; `; function App() { return ; }..

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를 ..