Custom Component (Styled-Component에 대해)

오늘은 리액트로 프론트엔드를 구축할 때 , 구조적으로 코드를 작성하는 방법에 대해 작성해 볼 것이다. 

 

CDD 란?
Component Driven Development
부품 단위로 UI 컴포넌트를 만들어 나가는 개발 방법

같은 UI 컴포넌트를 공유 즉 재사용할 수 있는 UI 컴포넌트를 개발하기 위해 고안됨

CSS-in-JS
컴포넌트 단위의 개발은 캡슐화의 중요성을 불러옴 
CSS는 컴포넌트 기반의 방식을 위해 만들어진 적이 없음 
그래서 탄생한 것이 CSS-in-JS 

CSS도 컴포넌트 영역으로 불러들이겠다 ! 

대표적 예 ) Styled-Component

Styled-Component 
기능적 혹은 상태를 가진 컴포넌트로부터 UI를 완전히 분리해 사용할 수 있는 단순한 패턴을 제공
CSS를 컴포넌트화 시켜주는 라이브러리

밑에서부터 Styled Component 의 사용법에 대해 알아보자 

Styled Component 설치 및 import 

import styled from "styled-components" //파일 불러오기

 

Styled Component 문법

컴포넌트 만들기

컴포넌트를 선언한 후 styled.태그종류 를 할당하고 , 백틱안에 기존 CSS를 작성하던 문법과 똑같이 스타일 속성 을 작성해주면 됨.

const 컴포넌트이름 = styled.태그종류 `
	css속성1 : 속성값;
	css속성2 : 속성값;
`;

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>;
}

 

컴포넌트를 재활용해 새로운 컴포넌트 만들기

이미 만들어진 컴포넌트를 재활용 할 수 있음 .
컴포넌트를 선언하고 styled() 에 재활용할 컴포넌트를 전달해준 다음 ,추가하고 싶은 스타일 속성을 작성해주면 됨 .

const 컴포넌트이름 = styled(재사용할 컴포넌트)`
	추가할 속성1 : 속성값;
	추가할 속성2 : 속성값;
`

import styled from "styled-components";

const BlueButton = styled.button`
  background-color: blue;
  color: white;
`;

//만들어진 컴포넌트를 재활용해 컴포넌트를 만들 수 있습니다.
const BigBlueButton = styled(BlueButton)`
  padding: 10px;
  margin-top: 10px;
`;

//재활용한 컴포넌트를 재활용할 수도 있습니다.
const BigRedButton = styled(BigBlueButton)`
  background-color: red;
`;

export default function App() {
  return (
    <>
      <BlueButton>Blue Button</BlueButton>
      <br />
      <BigBlueButton>Big Blue Button</BigBlueButton>
      <br />
      <BigRedButton>Big Red Button</BigRedButton>
    </>
  );
}

 

 

Props 활용하기

리액트 컴포넌트처럼 props를 내려줄 수 있음
템플릿 리터럴 문법을 사용해 js코드를 사용할 수 있음 

const 컴포넌트이름 = styled.태그종류`
	css속성 : ${(props) => 함수코드 }
`;

import styled from "styled-components";
import GlobalStyle from "./GlobalStyle";
//받아온 prop에 따라 조건부 렌더링이 가능합니다.
const Button1 = styled.button`
  background: ${(props) => (props.skyblue ? "skyblue" : "white")};
`;

export default function App() {
  return (
    <>
      <GlobalStyle />
      <Button1>Button1</Button1>
      <Button1 skyblue>Button1</Button1>
    </>
  );
}

 

전역 스타일 설정하기 

전역으로 스타일을 설정할 수 있음 

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
	button {
		padding : 5px;
    margin : 2px;
    border-radius : 5px;
	}
`

function App() {
	return (
		<>
			<GlobalStyle /> //최상위 컴포넌트에서 사용하기 !
			<Button>전역 스타일 적용하기</Button>
		</>
	);
}