전체 글
-
11. Styled-components : 버튼 outline, fullWidth 설정 - 컴포넌트 스타일링 | 벨로퍼트Front-end/React.js 2020. 7. 20. 15:41
outline Button 컴포넌트에 outline 이라는 props 를 설정하여 이 값이 true 일 때에는 테두리만 지닌 버튼을 보여주도록 설정해보겠습니다. 이 작업을 할 때에는 colorStyles 만 수정해주면 됩니다. /src/components/Button.js : // ... const colorStyles = css` ${({ theme, color }) => { const selected = theme.palette[color]; return css` background: ${selected}; &:hover { background: ${lighten(0.1, selected)}; } &:active { background: ${darken(0.1, selected)}; } ${props..
-
10. Styled-components : 버튼 사이즈 조정하기 - 컴포넌트 스타일링 | 벨로퍼트Front-end/React.js 2020. 7. 20. 15:17
size props 를 설정하여 버튼의 크기도 다양하게 만들어보겠습니다. /src/components/Button.js : // ... const sizeStyles = css` ${props => props.size === 'large' && css` height: 3rem; font-size: 1.25rem; `} ${props => props.size === 'medium' && css` height: 2.25rem; font-size: 1rem; `} ${props => props.size === 'small' && css` height: 1.75rem; font-size: 0.875rem; `} `; const StyledButton = styled.button` // ... /* 크기 */ $..
-
9. Styled-components : Polished 스타일 유틸 함수 사용 - 컴포넌트 스타일링 | 벨로퍼트Front-end/React.js 2020. 7. 20. 11:08
Sass 를 사용 할 때에는 lighten() 또는 darken() 과 같은 유틸 함수를 사용하여 색상에 변화를 줄 수 있었는데요, CSS in JS 에서도 비슷한 유틸 함수를 사용하고 싶다면 polished 라는 라이브러리를 사용하면 됩니다. 우선, 패키지를 설치를 해주세요. $ yarn add polished 그럼, 기존에 색상 부분을 polished 의 유틸 함수들로 대체를 해보겠습니다. /src/components/Button.js : // ... import { darken, lighten } from 'polished'; const StyledButton = styled.button` // ... /* 색상 */ background: #228be6; &:hover { background: ${..
-
8. Styled-components : 버튼 만들기 - 컴포넌트 스타일링 | 벨로퍼트Front-end/React.js 2020. 7. 20. 10:24
이제 우리가 이전 Sass 를 배울 때 만들었던 재사용성 높은 Button 컴포넌트를 styled-components 로 구현을 해보겠습니다. 기본적인것부터 단계적으로 구현해봅시다. src 안에 components 디렉터리를 생성 후, 그 안에 Button.js 파일을 생성하세요. /src/components/Button.js : import React from 'react'; import styled from 'styled-components'; const StyledButton = styled.button` /* 공통 스타일 */ display: inline-flex; outline: none; border: none; border-radius: 4px; color: white; font-weight..
-
7. Styled-components - 컴포넌트 스타일링 | 벨로퍼트Front-end/React.js 2020. 7. 20. 10:06
이번에 배워볼 기술은 CSS in JS 라는 기술입니다. 이 문구가 뜻하는 그대로, 이 기술은 JS 안에 CSS 를 작성하는 것을 의미하는데요, 우리는 이번 튜토리얼에서 해당 기술을 사용하는 라이브러리인 styled-components 를 다뤄볼 것입니다. styled-components 는 현존하는 CSS in JS 관련 리액트 라이브러리 중에서 가장 인기 있는 라이브러리입니다. 이에 대한 대안으로는 emotion 와 styled-jsx가 있습니다. Tagged Template Literal styled-components 를 사용하기 전에, Tagged Template Literal 이라는 문법에 대하여 짚고 넘어가면, styled-components 가 내부적으로 어떻게 작동하는지 이해 할 수 있습..
-
6. CSS Module - 컴포넌트 스타일링 | 벨로퍼트Front-end/React.js 2020. 7. 16. 22:34
이번에는 CSS Module 이라는 기술에 대해서 알아봅시다. 리액트 프로젝트에서 컴포넌트를 스타일링 할 때 CSS Module 이라는 기술을 사용하면, CSS 클래스가 중첩되는 것을 완벽히 방지할 수 있습니다. CRA 로 만든 프로젝트에서 CSS Module 를 사용 할 때에는, CSS 파일의 확장자를 .module.css 로 하면 되는데요, 예를 들어서 다음과 같이 Box.module.css 라는 파일을 만들게 된다면 /src/Box.module.css : .Box { background: black; color: white; padding: 2rem; } 리액트 컴포넌트 파일에서 해당 CSS 파일을 불러올 때 CSS 파일에 선언한 클래스 이름들이 모두 고유해집니다. 고유 CSS 클래스 이름이 만들어..
-
5. Sass : ...rest props 전달하기 - 컴포넌트 스타일링 | 벨로퍼트Front-end/React.js 2020. 7. 14. 00:07
...rest props 전달하기 이제 우리가 버튼 컴포넌트는 다 만들었는데요, 만약에 이 컴포넌트에 onClick 을 설정해주고 싶다면 어떻게 해야 할까요? /src/components/Button.js : function Button({ children, size, color, outline, fullWidth, onClick }) { return ( {children} ); } 만약 onMouseMove 이벤트를 관리하고 싶다면..? function Button({ children, size, color, outline, fullWidth, onClick, onMouseMove }) { return ( {children} ); } 필요한 이벤트가 있을 때 마다 매번 이렇게 넣어주는건 귀찮습니다. 이..
-
4. Sass : outline,fullWidth props 설정 - 컴포넌트 스타일링 | 벨로퍼트Front-end/React.js 2020. 7. 13. 23:37
outline 옵션 만들기 이번에는 outline 이라는 옵션을 주면 버튼에서 테두리만 보여지도록 설정을 해보겠습니다. Button.js 를 다음과 같이 수정해보세요. /src/components/Button.js : function Button({ children, size, color, outline }) { return ( {children} ); } 여기서는 outline 값을 props 로 받아와서 객체 안에 집어 넣은 다음에 classNames() 에 포함시켜줬는데요, 이렇게 하면 outline 값이 true 일 때에만 button 에 outline CSS 클래스가 적용됩니다. 만약 outline CSS 클래스가 있다면, 테두리만 보여지도록 스타일쪽 코드도 수정해보세요. /src/compone..