Styled-Components 개념 정리하기

• Styled-Components의 개념과 장단점

컴포넌트가 많은 경우 스타일링을 하다보면

이와 같은 불편함이 발생할 수 있습니다.
이때 스타일을 바로 입혀서 컴포넌트를 만들어버릴 수 있는 또 클래스명을 중복되지 않게 자동으로 만들어지기 때문에 따로 지정하지 않아도 되기에 편리합니다.
styled-components 라이브러리를 사용할 수 있습니다.

npm install styled-components
yarn add styled-components

//사용하고자 하는 컴포넌트에 추가
import styled from 'styled-components'

CSS-in-JS는 JavaScript의 변수와 함수를 활용하여 동적인 스타일링을 가능하게 합니다. 이는 애플리케이션의 상태에 따라 스타일이 바뀌어야 하는 경우에 특히 유용합니다.

CSS-in-JS는 JavaScript 번들의 일부로 스타일을 로드합니다. 이는 별도의 HTTP 요청 없이 스타일을 로드할 수 있음을 의미합니다.

대부분의 CSS-in-JS 라이브러리는 브라우저에서 JavaScript를 실행하여 동적으로 style 태그를 생성하고, 이 태그에 스타일을 삽입합니다

• CDD의 개념

페이지가 완성된 다음 다른 페이지에 적용되는 버튼에 대한 추가적인 기획안이 도착했다
이때 이전 페이지에서 사용했던 버튼을 똑같이 사용하도록 요청받았다면 여러 프로젝트, 팀간에 같은 UI 컴포넌트를 공유한다면 새로 만들어야 하나? 라는 고민을 하지 않아도 된다

디자인과 개발 단계에서부터 재사용할 수 있는 UI 컴포넌트를 미리 디자인하고 개발하면 이런 고민을 해결할 수 있고
고민 해결을 위해 등장한 개발 방법이 바로 Component Driven Development (CDD) 이다

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

CDD는 컴포넌트를 모듈 단위로 개발하여 UI 구축에 도달하는 개발 및 설계 방법론이다. 기본적인 컴포넌트 단위에서 시작해 페이지나 화면 수준까지 상향식(bottom-up)으로 UI를 구축하는 과정을 뜻한다.