TIL 26

컴포넌트 단위로 개발하기

Component Driven Development

• 재활용할 수 있는 UI컴포넌트를 디자인과 개발 단계에서 미리 정해놓는 것의 중요성

• Component Driven Development(CDD)

• 레고처럼 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 진행할 수 있음

Storybook

• Storybook은 UI개발 즉, Component Driven Development를 하기 위한 도구

• 각각의 컴포넌트들을 따로 볼 수 있게 구성해주어 한 번에 하나의 컴포넌트에서 작업할 수 있음

CSS in JS

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

• 기술 발달과 함께 사용자들은 다양한 환경(디바이스)에서 인터넷을 사용하게 되었고, 이에 따라 CSS 작성 방식도 꾸준히 진화하고 있음

• 프로젝트 규모 및 복잡도의 증가, 팀원의 증가, 그리고 디바이스의 다양화는 일관된 CSS 작성의 걸림돌이 되었음

• CSS 작업을 효율적으로 하기 위해 구조화된 CSS의 필요성이 대두되었고, 문제점들을 해결하기 위해 CSS 전처리기(Preprocessor)라는 개념이 등장

• 흔히 CSS를 작성할 때는 많은 반복 작업을 요구하고, color 값을 찾거나 tag를 닫는 등의 번거로운 작업이 포함되어 있음. 또한, 클래스의 상속 같은 사항으로 점점 CSS 문서의 양이 많아지는 것은 유지관리에 영향을 끼침

• 이러한 CSS의 문제점들을 프로그래밍 개념(변수, 상수, 상속 등)을 활용하여 해결할 수 있음

SASS

• 특정 속성의 값을 변수로 선언하여 필요한 곳에 변수를 적용하거나, 반복되는 코드를 선언하여 재사용하는 기능을 가짐

• SASS는 SCSS코드를 읽어서 전처리한 다음, 컴파일해서 전역 CSS 번들 파일을 만들어주는 전처리기의 역할을 함

• 하지만 스타일이 겹치는 문제를 해결하기 위해 계층 구조를 만들어냄으로써 컴파일된 CSS의 용량이 매우 커지는 문제가 발생

BEM

• Block, Element, Modifier로 구분하여 클래스명을 작성하는 방법

  • Block: 전체를 감싸고 있는 블럭 요소
  • Element: 블럭이 포함하고 있는 한 조각
  • Modifier: 블럭 또는 요소의 속성(외관이나 상태를 변화가능하게 하는 부분)

• Block, Element, Modifier 각각은 -와 _로 구분
  

    .header_navigation--navi-text {
    	color: red;
        }

header: Block
navigation: Element
Modifier: navi-text

• 클래스명은 BEM 방식의 이름을 여러 번 반복하여 재사용할 수 있도록 하며, HTML/CSS/SASS 파일에서도 일관된 코딩 구조를 만들어 줌

• 하지만 클래스명 선택자가 장황해지고, 긴 클래스명 때문에 마크업이 불필요하게 커지며, 재사용할 때마다 모든 UI컴포넌트를 명시적으로 확장해야함

CSS in JS: Styled-Component

• 개발 방향이 어플리케이션으로 진화하면서 컴포넌트 단위의 개발은 캡슐화의 중요성을 불러옴

  • 캡슐화: 객체의 속성과 행위(메서드)를 하나로 묶고, 실제 구현 내용 일부를 외부에 감추어 숨김

• CSS도 컴포넌트 영역에 포함시키기 위해 CSS-in-JS가 탄생함

Styled Component

• Styled-Component는 React의 컴포넌트 기반 개발 환경에서 스타일링을 위한 CSS의 성능 향상을 위해 탄생

• Styled Component를 활용하여 기존 CSS 문법으로도 스타일 속성이 추가된 React 컴포넌트를 만들 수 있음

// 변수 선언하듯 Button 생성
  // tag의 속성 정의( `a` tag)
  // 백틱 안에 기존 CSS 문법으로 스타일 속성 정의
const Button = styled.a`
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
`;

• Styled Component의 특징

  • Styled Component는 스스로 유니크한 className을 생성
  • 더 이상 사용하지 않거나 삭제한 컴포넌트를 삭제할 경우 해당 스타일 속성도 함께 삭제됨
  • className을 일일이 관리할 필요 없이 React의 props나 전역 속성을 기반으로 컴포넌트에 스타일 속성을 부여할 수 있음

• 설치 및 세팅
  $ npm install --save styled-components

package.json에 다음 코드 추가하여 여러 버전의 중복 설치 예방

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

• Styled Component는 tagged template literals라는 ES6 문법 이용. 컴포넌트를 만들 때 해당 문법으로 컴포넌트 스타일 속성을 정의하면, 별도의 CSS파일 없이 스타일 속성을 지닌 컴포넌트를 만들 수 있음

useRef

DOM Reference를 활용하기 위한 useRef Hook을 활용할 수 있다.

• React만 가지고 거의 대부분의 프론트엔드 요구사항을 구현할 수 있지만, DOM 엘리먼트의 주소값을 활용하는 경우 React로만 이를 해결할 수 없음

• React는 useRef로 DOM 노드, 엘리먼트, 리액트 컴포넌트 주소값을 참조할 수 있음

const address = useRef(참조자료형)

return (
    <div>
      <input ref={address} type="text" />
        {/* React에서 사용 가능한 ref라는 속성에 address를 값으로 할당하면*/}
        {/* address 변수에는 input DOM 엘리먼트의 주소가 담김 */}
        {/* 향후 다른 컴포넌트에서 input DOM 엘리먼트를 활용할 수 있음 */}
    </div>
  );

디자인 시스템

• UI 개발이 까다로운 이유는 많은 수의 페이지와 복잡한 화면 때문. 하지만 복잡한 화면이라도 기분적인 레이아웃 구성에 사용되는 UI가 반복적으로 재사용 되었고, 자연스레 UI 컴포넌트를 개발하게 됨

• UI 컴포넌트들의 모음을 구조화 하는 방법으로 디자인 시스템이라는 용어가 등장

• 즉, 디자인 시스템은 서비스를 만드는 데 사용하는 컬러, 폰트, 각종 정책 및 규정에 관한 모든 컴포넌트를 정리해 놓은 것으로서 불필요한 커뮤니케이션을 없애기 위해 체계적으로 정리한 시스템