TIL 38: [React] 컴포넌트 디자인

오늘은 React에서 컴포넌트 단위로 어떻게 디자인 할 수 있는지에 대해 이론적인 부분을 학습했습니다. 게임 프로젝트를 진행할 때 이렇게 CSS를 적용하고 싶었는데 그 때는 하는 방법을 몰라 제대로 구현할 수 없었지만, 이제 이 부분을 적극 활용해서 좀 더 편리하게 페이지를 구현할 수 있을 것 같습니다 😊

 

컴포넌트 단위로 개발하기

Component-Driven Development

Component-Driven Development(CDD)란 재사용할 수 있는 UI 컴포넌트(부품) 단위로 개발하는 방법을 뜻합니다. CDD를 사용하면 이전에 요청받았던 버튼을 또 요청하는 경우 간편하게 처리할 수 있게됩니다. 

 

Storybook

CDD를 지원하는 도구는 Component Explorer(컴포넌트 탐색기)라고 합니다. 그 중 하나가 Storybook 입니다.

 

Storybook의 주요 기능은 아래와 같습니다.

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

Storybook을 터미널로 설치한 후, Storybook이 실행되기 위한 코드는 아래와 같습니다.

import React from "react";
import { Button } from "@storybook/react/demo";

export default {
  title: "Button",
  component: Button
};

export const Primary = () => (
  <Button>Hello Button</Button>
);

export const Secondary = () => (
 <Button>Bye Button</Button>
);

버튼 컴포넌트를 불러와서 Primary와 Secondary 함수 컴포넌트들을 export 하면 storybook에서 UI 목업을 확인할 수 있습니다.

 

 

 

 

CSS 방법론 특징

	특징	장점	단점
CSS	기본적인 스타일링 방법	-	일관된 패턴 갖기 어려움
SASS	CSS를 컴파일할 때 컴파일 직전에 실행되는 프로그램 (전처리기)	변수/함수/상속 개념을 활용하여 재사용 가능 CSS 구조화	전처리 과정 필요 디버깅의 어려움 컴파일한 CSS 파일이 거대해짐
BEM	CSS 클래스명 작성에 일관된 패턴을 강제하는 방법론	네이밍으로 문제 해결 전처리 과정 불필요	선택자 이름 장황하고, 클래스 목록 너무 많아짐
Styled Component (CSS in JS)	컴포넌트 기반으로 CSS를 작성할 수 있게 도와주는 라이브러리	CSS를 컴포넌트 안으로 캡슐화 네이밍이나 최적화를 신경 쓸 필요가 없음	빠른 페이지 로드에 불리함

 

 

 

 

Styled Component (CSS in JS)

Styled Component의 장점에 대해 더 알아보도록 하겠습니다.

• Automatic critical CSS Styled Component 는 화면에 어떤 컴포넌트가 렌더링 되었는지 추적해서 해당하는 컴포넌트에 대한 스타일을 자동으로 삽입합니다. 따라서 코드를 적절히 분배해 놓으면 사용자가 어플리케이션을 사용할 때 최소한의 코드만으로 화면이 띄워지도록 할 수 있습니다.
• No class name bugs Styled Component 는 스스로 유니크한 className 을 생성합니다. 이는 className 의 중복이나 오타로 인한 버그를 줄여줍니다.
• Easier deletion of CSS 기존에는 더 이상 사용하지 않거나 삭제한 컴포넌트에 해당하는 스타일 속성을 제거하기위해 CSS 파일 안의 className을 이리저리 찾아야 했습니다. 하지만 Styled Component 는 모든 스타일 속성이 특정 컴포넌트와 연결되어 있기 때문에 만약 컴포넌트를 더 이상 사용하지 않아 삭제할 경우 이에 대한 스타일 속성도 함께 삭제됩니다.
• Simple dynamic styling className을 일일이 수동으로 관리할 필요 없이 React 의 props 나 전역 속성을 기반으로 컴포넌트에 스타일 속성을 부여하기 때문에 간단하고 직관적입니다.
• Painless maintenance 컴포넌트에 스타일을 상속하는 속성을 찾아 다른 CSS 파일들을 검색하지 않아도 되기 때문에 코드의 크기가 커지더라도 유지보수가 어렵지 않습니다.
• Automatic vendor prefixing 개별 컴포넌트마다 기존의 CSS 를 이용하여 스타일 속성을 정의하면 될 뿐입니다. 이외의 것들은 Styled Component 가 알아서 처리해 줍니다.

Styled Component 에서는 package.json에 다음 코드를 추가하도록 권장하고 있습니다. 아래의 코드를 추가하면 여러 버전의 Styled Component가 설치되어 발생하는 문제를 줄여줍니다.

{
  "resolutions": {
    "styled-components": "^5"
  }
}

 

 

 

 

DOM Reference를 활용한 useRef

 

React는 아래와 같은 예외적인 상황에서 useRef으로 DOM 노드, 엘리먼트, 그리고 리액트 컴포넌트 주소값을 참조할 수 있습니다. 아래 예시 코드처럼 작성하시면 주소값을 활용할 수 있습니다.

• focus
• text selection: 텍스트 복붙이나 검색하기 위해 영역 설정하고 싶을 때
• media playback: 동영상 일시정지/재생기능
• 에니메이션 적용
• d3.js, greensock 등 DOM 기반 라이브러리 활용: d3.js는 동적이고 인터렉티브한 데이터를 시각화하기 위해 사용되는 라이브러리입니다. greensock은 고품질 애니메이션이 구현될 수 있도록 도와주는 라이브러리입니다.