[React] Custom Component

📌 Component Driven Development

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

📌 Styled Components

애플리케이션으로 개발 방향이 진화하면서 컴포넌트 단위의 개발은 캡슐화의 중요성을 불러왔습니다. CSS도 컴포넌트 영역으로 불러들이기 위해서 CSS-in-JS가 탄생했습니다.

CSS in JS 라이브러리를 사용하면 CSS도 쉽게 Javascript 안에 넣어줄 수 있으므로, HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있게 됩니다. 이런 CSS in JS 라이브러리 중에서 현재 가장 인기 있는 라이브러리가 바로 Styled Components입니다.

✔️ 버튼 구현하기

import styled from "styled-components";

const Button1 = styled.button`
  padding: 1rem;
  font-size: 2rem;
  background: powderblue;
  border-radius: 1rem;
  transition: 0.5s;

  /* hover 했을 때 */
  &:hover{
    background: cornflowerblue;
    color: white;
    transition: 0.5s;
  }
`

export default function App() {
  return <Button1>Practice!</Button1>;
}