REACT LIBRARY

Styled-Components Dialog 만들기

Dialog란 화면을 가리면서 어떤 작업을 선택할지 나오게 되는 컴포넌트 박스입니다 Components 폴더에 Dialog.js 생성 기존에 만든 버튼을 활용할 예정이기에 버튼도 같이 불러옵니다 import React from "react"; import styled from "styled-components"; import Button from "./Button"; function Dialog() { return ; } export default Dialog; 어두운 배경 설정 const DarkBackground = styled.div` position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: cen..

Styled-Components 버튼 스타일 추가 설정

Button.js에서 outline props를 생성합니다 function Button({ children, color, size, outline, ...rest }) { return ( {children} ); } outline은 true or false Boolean값으로 정해지기 때문에 defaultProps 설정을 전달하지 않는다면 undefined가 되면서 false와 똑같이 간주하게 됩니다 색상 쪽에서 지정하겠습니다 ${(props) => props.outline && css` color: ${selected}; background: none; border: 1px solid ${selected}; &:hover { background: ${selected}; color: white; } `}..

Styled-Components 각각의 버튼 사이즈 조정 하는 방법

Button.js에서 size props를 생성합니다 function Button({ children, color, size, ...rest }) { return ( {children} ); } //Button 기본값 설정 Button.defaultProps = { color: "blue", size: "medium", }; 사이즈 props에 따라 각기 다른 값을 주겠습니다 props.size가 large라면 css에 어떤값을 줄 것이냐 라는 의미입니다 ${(props) => props.size === "large" && css` height: 3rem; font-size: 1.25rem; `} 2번 복사해서 large, medium, small을 만들고 값을 지정하겠습니다 /* 크기 */ ${(pro..

Styled-Components Polished 라이브러리

✨ polished | A lightweight toolset for writing styles in JavaScript A lightweight toolset for writing styles in JavaScript. polished.js.org Polished 라이브러리는 다양한 스타일 유틸 함수를 적용할 수 있습니다 사용할 함수를 가져와서 import하면 적용됩니다 Polished 라이브러리 설치 $ npm install --save polished Button.js에 사용할 import 해줍니다 import { darken, lighten } from 'polished'; hover에서 사용해봅시다 /* 색상 */ background: #228be6; &:hover { background: ${..

Styled-Components로 버튼 만들기

src 폴더에 components 폴더를 생성하고 BUtton.js 파일을 생성합니다 Styled-Components를 불러옵니다 import styled from "styled-components"; 버튼 컴포넌트 생성 const StyledButton = styled.button``; 먼저 공통적으로 해야할 사이즈를 조절합니다 const StyledButton = styled.button` /* 공통 스타일 */ display: flex; outline: none; border: none; border-radius: 4px; color: white; font-weight: bold; cursor: pointer; padding-left: 1rem; padding-right: 1rem; justify-..

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 라면 "체크" 라고 보여줍니다 그렇지 않으면 '체크 안됨' 이라고 보여줍니..