Search
Duplicate
💅

React야 예쁘게 꾸며줄게, Styled Components

간단소개
팔만코딩경 컨트리뷰터
ContributorNotionAccount
주제 / 분류
React
Javascript
프론트엔드
태그
개발지식
Scrap
8 more properties

학습목표

Styled Components를 사용하여 꾸미기 (CSS in JS)
Bootstrap을 사용하여 효율적으로 꾸미기

CSS in JS

: style 정의를 CSS 파일이 아닌!! JS로 작성된 컴포넌트에 삽입하는 기법
React와 같은 모던 JS 라이브러리가 인기를 얻으면서 등장
컴포넌트 기반 개발 방법
웹페이지를 여러 개의 컴포넌트, 즉 재활용이 가능한 빌딩 블록으로 분리
각 컴포넌트에 HTML, CSS, JS를 몽땅 때려 박는 패턴
React는 JSX를 사용해서 JS에 HTML 포함
CSS-in-JS 라이브러리를 사용하여 JS에 CSS도 포함 가능!
styled components, emotion, styled-jsx

Styled Components

사용 방법

styled 함수 import 해서 사용
import styled from "styled-components"; import Button from "./Button"; styled.button` // <button> HTML 엘리먼트에 대한 스타일 정의 `; styled(Button)` // <Button> React 컴포넌트에 대한 스타일 정의 `;
JavaScript
고정 스타일링
import React from "react"; import styled from "styled-components"; const StyledButton = styled.button` padding: 6px 12px; border-radius: 8px; font-size: 1rem; line-height: 1.5; border: 1px solid lightgray; color: gray; background: white; `; function Button({ children }) { return <StyledButton>{children}</StyledButton>; }
JavaScript

props 사용하기

: React 컴포넌트에 넘어온 props를 사용하여 가변 스타일링
1.
첫번째 방법
import React from "react"; import styled from "styled-components"; const StyledButton = styled.button` padding: 6px 12px; border-radius: 8px; font-size: 1rem; line-height: 1.5; border: 1px solid lightgray; color: ${(props) => props.color || "gray"}; background: ${(props) => props.background || "white"}; `; function Button({ children, color, background }) { return ( <StyledButton color={color} background={background}> {children} </StyledButton> ); }
JavaScript
JS의 || 연산자를 사용
props가 넘어오지 않은 경우, 기존에 정의한 속성이 유지되도록
2.
두번째 방법
import React from "react"; import styled, { css } from "styled-components"; const StyledButton = styled.button` padding: 6px 12px; border-radius: 8px; font-size: 1rem; line-height: 1.5; border: 1px solid lightgray; ${(props) => props.primary && css` color: white; background: navy; border-color: navy; `} `; function Button({ children, ...props }) { return <StyledButton {...props}>{children}</StyledButton>; }
JavaScript
prop에 따라 바꾸고 싶은 CSS 속성이 여러 개인 경우
css 함수를 사용해서 여러 개의 CSS 속성을 묶어서 정의
JS의 && 연산자를 사용
primary prop이 존재하는 경우에만 css로 정의된 스타일링 적용

사용하는 이유

자유로운 CSS 커스텀 컴포넌트를 만들 수 있음
React 컴포넌트가 자체 style을 포함하고 쉽게 재사용 가능
평범한 CSS로 만들어져 익숙한 작업 가능
모바일 지원
style scope
stylesheet에서 특성 요소 / 클래스 스타일을 변경하면 다른 요소에 영향을 미침
→ styled-components는 구성 요소 기반
no-class policy
개발자가 컴포넌트의 동작을 제어하기에 용이
props 사용 가능
서버 사이드 렌더링
서버에서 앱을 렌더링할 때마다 ServerStyleSheet Context API를 통해 공급자를 생성, 반응 트리에 추가
CSS 테스팅
실제 컴포넌트이기 때문에 단위 테스트 수행 가능
Jest로 테스팅 가능
Sass, 세련된 지원

추가적으로 배운 것들

useCallback

createGlobalStyle

css 함수 사용하기

&: 와 &::의 차이

코드 리팩토링

CSS vs SASS vs SCSS

css 드래그 방지

css 줄바꿈 기능

참고자료

CSS in JS
Styled Components
추가적으로 배운 것들