[TIL] 2022.2.20.(월)

CCD(Component Driven Development)

-디자인과 개발단계에서부터 재사용할 수 있는 UI컴포넌트를 미리 디자인하고 개발하는것

CSS작업을 효율적으로 하기 위해 구조화된 CSS의 필요성이 대두되었다. 위의 CSS방법론은 각각의 장단점이 있으나, 세 방법론 모두 같은 지향점을 가지고 있다.

• 코드의 재사용
• 코드의 간결화
• 코드의 확장성
• 코드의 예측성(클래스 명으로 의미예측)

Styled Component:React로 Coponent Driven Development를 할 수 잇는 대표적인 도구

리액트환경에서 CSS를 컴포넌트화 시킨다.

CSS in JS라는 개념이 대두되면서 나온 라이브러리이다. 이를 이용하여 CSS로 Javascript에 넣어줄 수 있으므로 HTML,JS,CSS 를 하나로 묶어서 하나의 JS파일 안에서 컴포넌트단위로 개발 할 수 있게 된다.

 

<Styled Components로 컴포넌트를 만드는 방법>

백틱을 사용한다. 컴포넌트를 선언한 후, styled.태그종류를 할당하고, 백틱안에 CSS문법을 작성한다.

이렇게 만든 컴포넌트를 리액트 컴포넌트를 사용하든 리턴문안에 작성해주면 된다.

 

위 예시를 보면 const BuleButton으로 선언한 후, styled.button을 할당하였다.

그리고 ``백틱안에 css문법을 작성해주었다.

그리고 이렇게 만든 컴포넌트를 기존 리액트 컴포넌트처럼 리턴문안에 작성하였다.

 

만들어진 컴포넌트를 재사용 하는 경우, 컴포넌트를 선언하고 styled()에 재활용한 컴포넌트를 전달해 준 다음, 추가하고 싶은 스타일속성을 작성한다.

위 예시에서 BigblueButton을 보면, styled(BlueButton)이라고 작성한것을 볼수 있다. 만들어진 컴포넌트를 이용해 컴포넌트를 만든것이다.

위 예시의 결과물

Props활용하기

Styled Component로 만든 컴포넌트도 리액트컴포넌트처럼 props를 내려줄 수 있다. 내려준 props값에 따라 컴포넌트를 렌더링하는것도 가능하다.

-props로 조건부 렌더링하기

위 코드는 삼항연산자를 이용해 <Button>컴포넌트에 skyblue props가 있으면 배경색으로 skyblue, 없으면 white를 지정해준다,

따라서 렌더링하면 위와 같이 된다.

위 두 예시들 처럼 props의 값을 통째로 활용해서 컴포넌트 렌더링에 사용할 수 있다.

 

전역에 스타일을 설정할 수도 있다, -> createGlobalStyle