React _ Styled Components

이승미·2022년 6월 30일
0

1. CDD

CDD (component-Driven Dvelopment)

  • CDD를 사용하면 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 진행할 수 있다.
  • 이렇게 하면 여러 프로젝트 간에 같은 UI 컴포넌트를 사용할 수 있다. (재사용할 수 있는 UI 컴포넌트!)

2. CSS 방법론

기술의 발달에 따라 CSS를 작성하는 방식 또한 꾸준히 진화해오고 있다. (마치 인류의 진화 과정처럼!)

문제점 1 : CSS 작성에 있어 일관된 패턴이 없어 작성이 효율적이지 않다!
-> 진화 1 : CSS 구조화 (CSS 전처리기)

  • CSS 작성 시 요구되는 많은 반복적 작업 (color 찾기, tag 닫기 등등 ) -> 프로그래밍 개념 (변수, 함수, 상속) 사용해 해결!
  • CSS 전처리기 사용시 이에 맞는 컴파일러 사용해야 우리가 사용하는 CSS 문서로 변환이 됨.

대표적 예시 : SASS (Syntactically Awesome Style Sheets)

  • CSS를 만들어주는 언어
  • JS처럼 특정 속성 (color, margin...)의 값을 변수로 선언해 필요한 곳에 사용 가능
  • 반복되는 코드를 한 번의 선언으로 여러 곳에서 재사용 가능하게 함
  • 단점 : 전처리 과정이 필요하며, 컴파일한 CSS 파일의 용량이 커진다, 언어 로직상 진정한 캡슐화의 개념이 없다. (실제 구현 내용을 외부로부터 은닉 X)

문제점 2 : CSS 전처리기를 사용하면 전처리 과정이 필요하며 CSS 파일의 용량이 거대해진다!
-> 진화 2 : BEM, OOCSS, SMACSS 와 같은 CSS 방법론

이 방법론들은 공통적으로 다음과 같은 지향점을 가짐

  • 코드의 재사용
  • 코드의 간결화
  • 코드의 확장성
  • 클래스명으로 의미 예측 가능

대표적 예시 : BEM (Block, Element, Modifier)

  • 이름 그대로 Block, Element, Modifier 세 가지로 구분하여 클래스 명을 작성하는 방식 (각각 -와 _으로 구분함)
  • 클래스면 재사용 가능 -> 일관된 코딩 구조를 만들어줌
  • 단점: 클래스명이 너무 길어지며, 클래스 목록이 너무 많아짐, 언어 로직상 진정한 캡슐화의 개념이 없음

문제점 3 : BEM의 네이밍 문제와 CSS 전처리기, BEM의 캡슐화 문제!
-> 진화 3 : CSS-in-JS

  • CSS를 컴포넌트 기반으로 작성할 수 있게 도와주는 라이브러리
  • JS 파일 안에서 HTML + JS + CSS 를 하나로 묶어 컴포넌트 단위로 개발할 수 있게 됨
  • 위의 모든 문제점을 해결하는 방식!

대표적 예시 : Styled-Components

  • CSS-in-JS 중에서 가장 널리 사용되고 있는 라이브러리
  • 단점 : 빠른 페이지 로드에 불리함

3. Styled-Components

그렇다면 CSS를 컴포넌트의 영역으로 불러들여 위의 모든 문제점을 해결한 Styled-Component 라이브러리에 대해서 배워보자.

Styled-Components 설치

$ npm install --save styled-components

터미널에 다음과 같은 명령어를 입력해 Styled-Components 를 설치해준다.

import styled from "styled-components"

그 후 styled component 를 사용할 파일로 import 해준다.


Styled-Component 기본 문법

  1. 기본 문법
const 컴포넌트이름 = styled.태그종류`
  CSS속성1 : 속성값;
  CSS속성2 : 속성값;
`;
  1. 컴포넌트 재활용
const 컴포넌트이름 = styled(재활용할 컴포넌트)`
  추가할 CSS속성1 : 속성값;
  추가할 CSS속성2 : 속성값;
`
  1. Props 활용
// 기본문법
const 컴포넌트이름 = styled.태그종류`
  CSS속성 : ${(props) => 함수 코드}
`; 
// 삼항 연산자 사용해 조건부 렌더링
const 컴포넌트이름 = styled.태그종류`
  CSS속성 : ${(props) => props.value값 ? 속성값 : 속성값 }
`;
// Props 값 통째로 활용해 렌더링
const 컴포넌트이름 = styled.태그종류`
  CSS속성 : ${(props) => props.value값 ? props.value값 : 속성값}
`;
  1. 전역 스타일 설정
//import
import { createGlobalStyle } from "styled-components";
// 전역 스타일 설정
const GlobalStyle = createGlobalStyle`
  설정해주고 싶은 스타일 작성하기
`;
// 이렇게 코드 작성한 후 이 컴포넌트를 최상위 컴포넌트에서 사용해주면 적용이 됨
<GlobalStyle />

Styled-Component 연습

0개의 댓글