TIL-34, React Component

Component Driven Development (CDD)

→ 부품 단위로 UI 컴포넌트를 만들어 나가는 개발.

리액트의 장점이다.

Storybook

→ UI개발을 하기 위한 도구.

각각의 컴포넌트들을 따로 볼 수 있게 구성해줘서 한번에 하나의 컴포넌트에서 작업이 가능하다.

복잡한 개발 스택을 시작하거나, 특정 데이터를 데이터 베이스로 강제 이동하거나, 애플리케이션을 탐색할 필요 없이 전체 UI를 한눈에 보고 개발이 가능하다.

재사용성을 확대하기 위해 컴포넌트를 문서화하고, 자동으로 컴포넌트를 시각화하여 시뮬레이션 할 수 있는 다양한 테스트 상태를 확인할 수 있다.

이를 통해 버그를 사전에 방지할 수 있도록 도와준다.

또한 테스트 개발 속도를 향상시키는 장점이 있고, 의존성을 걱정하지 않고 빌드할 수 있다.

이러한 UI개발 도구를 사용하는 이유는?

• 애플리케이션의 다양한 상황에 구애받지 않고 UI 컴포넌트를 집중적으로 개발할 수 있다.
• 컴포넌트들이 문서화돼서 알아보기 쉽고, 개발이 용이하다.

storybook의 주요 기능

• UI 컴포넌트들을 카달로그화 하기
• 컴포넌트 변화를 Stories로 저장하기
• 핫 모듈 재 로딩과 같은 개발 툴 경험을 제공하기
• 리액트를 포함한 다양한 뷰 레이어 지원하기

Styled-Component

프로젝트의 크기가 점점 커지고 협업하는 팀원의 수도 많아짐에 따라 CSS의 구조화의 필요성이 대두됐다.

SASS, BEM 등 여러 시도가 있었지만 여러 문제점이 발생했고, 어플리케이션으로의 개발 방향이 진화되면서 컴포넌트 단위의 개발은 캡슐화의 중요성을 불러오며 CSS도 컴포넌트 영역으로 불러들이는 CSS-in-JS가 탄생한다.

대표적으로 Styled-Component가 있다.

Styled-Component의 특징

• React의 컴포넌트 기반 개발 환경에서 스타일링을 위한 CSS의 성능 향상을 위해 탄생하였다.
• 기존 CSS 문법으로도 스타일 속성이 추가된 React 컴포넌트를 만들 수 있다.
• 애플리케이션 내의 다른 웹페이지로 이동하는 기능을 가진 Button을 만든다고 가정, JavaScript에서 변수를 선언하듯이, 혹은 React에서 컴포넌트를 만들듯이 Button을 만들어주고, tag의 속성을 정의하고 (아래 코드에서는 a tag), back-ticks 안에 기존 css 문법을 이용하여 스타일 속성을 정의해준다.

const Button styled.a`
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
`;

위 처럼 컴포넌트 형식에 기존 css문법을 넣어주고, 컴포넌트를 사용하듯이 그대로 적용해 사용하면 된다.

Styled-Component 설치

// npm을 이용한 설치
$ npm install --save styled-components

// yarn을 이용한 설치
$ yarn add styled-components

// package.json에 아래 코드 추가하도록 권장함. (여러 버전의 Styled Component가 설치되어
// 발생하는 문제를 줄여준다)
{
  "resolutions": {
    "styled-components": "^5"
  }
}