CSS(Custom Component)

CDD (Component-Driven Development)

• 레고처럼 조립해 나갈 수 있는 부품 단위로  UI 컴포넌트를 만들어 나가는 개발
• 재사용할 수 있는 UI 컴포넌트를 미리 디자인
• 컴포넌트 단위로 만들어 페이지를 조립하는 개발 방식(상향식)
• 부품단위로 UI 컴포넌트를 만들어 나가는 개발

구조적인 CSS 작성 방법의 발전

• 인터넷이 만들어진 이후 기술 발달로 개발자의 CSS 작성 방식도 꾸준히 진화해 오고 있다.
• 프로젝트의 규모나 복잡도가 점점 커지고 팀원 수도 많아지면서 일관된 패턴의 중요성 인식
• 다양한 디바이스 등장으로 다양한 디스플레이를 커버해야 하기 떄문에 CSS는 더 복잡해짐
• 이에 따라 구조화된 CSS의 필요성이 대두 - CSS 전처리기(CSS Preprocessor) 개념 등장
  • CSS 전처리기 - CSS가 구조적으로 작성될 수 있게 도움을 주는 도구
  • CSS 전처리기에 맞는 Compiler를 사용해야 CSS 문서로 변환이 됨
• SASS (Syntactically Awesome Style Sheets) - CSS를 확장해 주는 스크립팅 언어
  • 특정 속성(color, margin 등)의 값(#fffff, 25rem 등)을 변수로 선언해 필요한 곳에 선언된 변수를 적용 및 재사용
  • SCSS 코드를 읽어서 전처리한 다음 컴파일해서 전역 CSS 번들 파일을 만들어 주는 전처리기 역할을 함
  • 하지만 CSS 구조화를 해결해 주는 장점보다 다른 단점이 많다는 것이 밝혀짐 
• CSS 전처리기의 문제를 보완하기 위해 BEM, OOCSS, SMACSS 같은 CSS 방법론이 대두됨
  • 공통 지향점은 코드의 재사용, 간결화 확장성, 예측성이다.
• BEM - Block, Element, Modifier로 구분해 클래스명 작성(--와 __로 구분)
  • 클래스명 선택자가 장황해지고, 마크업이 커지고, 재사용 할 때도 모든 UI 컴포넌트를 명시적으로 확장해야하는 단점이 발생
  • 언어 로직 상에 캡슐화의 개념이 없다는 것을 깨닫고 유일한 클래스명을 선택하는 것에 의존할 수 밖에 없었음
  • CSS도 컴포넌트 영역으로 불러들이기 위해 CSS-in-JS가 탄생하면서 문제 해결
• Styled-Component - CSS-in-JS의 대표
  • 기능적 혹은 상태를 가진 컴포넌트들로부터 UI를 완전히 분리해 사용할 수 있는 단순한 패턴 제공

 

Styled Components

• class, id 명 고민 안해도 됨, 찾기 쉬움, 관리하기 편함
• CSS를 컴포넌트화 시켜서 React 환경에서 사용가능

설치하기

$ npm install --save styled-components // with npm

$ yarn add styled-component // with yarn

//package.json에 코드 추가 -- 여러 버전이 설치되어 발생하는 문제를 줄여줌
{
	"resolutions" : {
    	"styled-components": "^5"
    }
}

import styled from "styled-components" // import로 불러오기

 

Styled Components 문법

1. 컴포넌트 만들기

• 백틱 (`)을 사용
• 컴포넌트 선언한 후 styled.태그종류 할당
• 백틱 안에 기존 CSS를 작성하던 문법과 똑같이 스타일 속성 작성
• React 컴포넌트 사용하듯 리턴문 안에 작성해주면 스타일이 적용된 컴포넌트가 렌더된다.

2. 컴포넌트 재활용

• styled()에 재활용할 컴포넌트를 전달해준 다음, 추가하고 싶은 스타일 속성을 작성한다.

3. Props 활용

• props를 내려 사용할 수 있다. 내려준 props 값에 따라 컴포넌트를 렌더링하는 것도 가능. ${}를 사용함

조건부 렌더링

 

 

전역 스타일 설정하기

import { createGlobalStyle } from "styled-components"; // 전역 스타일 설정을 위한 함수 불러오기

//설정해주고 싶은 스타일 작성
const GlobalStyle = createGlobalStyle`
	button {
		padding : 5px;
    margin : 2px;
    border-radius : 5px;
	}
`

//최상위 컴포넌트에 사용
function App() {
	return (
		<>
			<GlobalStyle />
			<Button>전역 스타일 적용하기</Button>
		</>
	);
}