[TIL] [React] Custom Component

CDD

CDD(Component Driven Development)는 UI 컴포넌트를 재사용할 수 있도록 미리 디자인하고 개발하는 방식이다.
부품 단위로 UI 컴포넌트를 만들어 재사용성을 극대화한다.

이전까지 프로젝트 규모와 복잡도, 협업 인원이 늘어났음에도 CSS를 작성하는 일관된 패턴이 없었다.
더불어 웹 사이트가 출력해야 할 디스플레이의 종류가 늘어남에 따라 더욱 복잡해졌다.
이에 CSS 전처리기(CSS Preprocessor)가 등장했다.

CSS 문서를 작성하는 것은 많은 번거롭고 반복적인 작업이 포함된다.
또한, 클래스의 상속과 같은 사항으로 점점 CSS 문서는 양이 많아졌다. 이러한 점은 유지관리에 많은 영향을 줬다.

효율적인 CSS 작성을 위한 많은 대안, 논의가 이루어졌다.
CSS를 확장해 주는 스크립팅 언어 SASS 또는 BEM, OOCSS, SMACSS 등 CSS 방법론 등이 그 예이다.
하지만 이들도 진정한의 의미의 캡슐화가 아니였으므로 코드가 방대해지고, 확장해나갔다.

Styled Component

애플리케이션으로 개발 방향이 진화하면서 컴포넌트 단위의 개발은 캡슐화의 중요성을 강조했다.
CSS도 컴포넌트 단위로 개발하기 위해 CSS-in-JS가 탄생했고, 이 방식은 과거의 시도들에서 얻은 문제점을 해결했다.

Styled-Component는 기능적(Functional) 혹은 상태를 가진 컴포넌트들로부터 UI를 완전히 분리해 사용할 수 있는 아주 단순한 패턴을 제공한다.

npm install --save styled-components
import styled from "styled-components"
Styled Component를 사용하기 위해 npm을 통해 설치하고 import 해준다.

문법

Styled-Component 탬플릿 리터럴문법을 이용해 작성한다.
리액트처럼 컴포넌트 첫 글자를 대문자로 작성한다.

const Component = styled.Tag `
	css attributes1 : attributes value;
    css attributes2 : attributes value;
`;

재활용하여 새로운 컴포넌트 만들기

컴포넌트를 재활용해 새로운 컴포넌트를 생성할 수 있다.
컴포넌트를 선언하고 styled() 안에 재활용할 컴포넌트를 넣어준다.
그 후 추가하고싶은 CSS 속성을 넣어주면 기존 컴포넌트에 속성을 추가할 수 있다.

const Reuse = styled(Component) `
	css attributes3 : attributes value; 
`

Props

리액트 컴포넌트처럼 Props로 데이터를 내려줄 수 있다.

const Button1 = styled.button`
  background: ${(props) => (props.skyblue ? "skyblue" : "white")};
`;

export default function App() {
  return (
    <>
      <GlobalStyle />
      <Button1>Button1</Button1> // 배경색이 흰색인 버튼
      <Button1 skyblue>Button1</Button1> 배경색이 skyblue인 버튼
    </>
  );
}