[React] Custom Component

키워드 : CDD, Styled Components, Storybook, useRef ... 등

---

Component Driven Development (CDD)

- 부품을 만들어 조립해나가듯, 컴포넌트 단위로 개발하는 방법.

- 재사용할 수 있는 컴포넌트를 개발하여 활용한다.

 

 

CSS in JS

- CSS -> CSS전처리기 -> BEM 이후 등장한 가장 최근의 CSS 방법론.

출처 : 코드스테이츠

 

 

Styled-Component

- 대표적인 CSS in JS

- 리액트에서 사용 가능한 라이브러리로, CSS를 컴포넌트화하여 사용이 가능하다.

 

컴포넌트 만드는 법

const BlueButton = styled.button`	// 선언한 변수에 styled.태그명`
	background-color: blue;		// 속성:속성값;
	color:white;			// 속성:속성값;
`;					// `;

 

작성한 컴포넌트는 리턴문 안에서 사용해주면 된다.

import styled from "styled-components";

//Styled Components로 컴포넌트를 만들고
const BlueButton = styled.button`
  background-color: blue;
  color: white;
`;

export default function App() {
  // React 컴포넌트를 사용하듯이 사용하면 됩니다.
  return <BlueButton>Blue Button</BlueButton>;
}

 

컴포넌트 재활용해서 새로운 컴포넌트 만드는 법

const BigBlueButton = styled(BlueButton)`
	padding: 10px;
	margin-top: 10px;
`;