[React] Custom Component

경남_ABC_FE/Section_3 2023. 11. 30. 15:03

CDD (Component-Driven Development)

부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 진행

CSS in JS

CSS 전처리기란 CSS가 구조적으로 작성될 수 있게 도움을 주는 도구이다. 하지만 이 CSS 전처리기 자체만으로는 웹 서버가 인지하지 못하기 때문에 각 CSS 전처리기에 맞는 Compiler를 사용해야 하고 컴파일을 하게 되면 실제로 우리가 사용하는 CSS 문서로 변환이 된다.

CSS 구조화를 위한 다양한 시도

CSS 전처리기의 등장 - SASS

SASS는 Syntactically Awesome Style Sheets의 약자로 CSS를 확장해 주는 스크립팅 언어이다.

CSS를 만들어주는 언어로서 특정 속성의 값을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수 있고, 반복되는 코드를 한 번의 선언으로 여러 곳에서 재사용할 수 있도록 해 주는 등의 기능을 가졌다.

-> 그러나 장점보다 다른 문제들을 많이 야기

-> 이러한 CSS 전처리기의 문제를 보완하기 위해 CSS 방법론이 대두되었다.

지향점은 다음과 같다

코드의 재사용
코드의 간결화 (유지 보수 용이)
코드의 확장성
코드의 예측성 (클래스 명으로 의미 예측)

BEM (Block, Element, Modifier)로 구분하여 클래스명을 작성하는 방법

-> 클래스명 선택자가 장황해지고, 마크업이 불필요하게 커지는 등의 문제점

-> 애플리케이션으로 개발 방향이 진화하면서 컴포넌트 단위의 개발은 캡슐화의 중요성을 불러왔다.

CSS-in-JS에는 대표적으로 Styled-Component가 있다.

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

	특징	장점	단점
CSS	기본적인 스타일링 방법	-	일관된 패턴을 갖기 어려움, !important의 남용
SASS (preprocessor)	프로그래밍 방법론을 도입하여, 컴파일된 CSS를 만들어내는 전처리기	변수/함수/상속 개념을 활용하여 재사용 가능 CSS의 구조화	전처리 과정이 필요, 디버깅의 어려움이 있음 컴파일한 CSS 파일이 거대해짐
BEM	CSS 클래스명 작성에 일관된 패턴을 강제하는 방법론	네이밍으로 문제 해결, 전처리 과정 불필요	선택자의 이름이 장황하고, 클래스 목록이 너무 많아짐
Styled-Component (CSS-in-JS)	컴포넌트 기반으로 CSS를 작성할 수 있게 도와주는 라이브러리	CSS를 컴포넌트 안으로 캡슐화, 네이밍이나 최적화를 신경 쓸 필요가 없음	빠른 페이지 로드에 불리함

Styled Components

Props 활용하기

1) 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>
    </>
  );
}

2) Props 값으로 렌더링하기

import styled from "styled-components";
import GlobalStyle from "./GlobalStyle";

//받아온 prop 값을 그대로 이용해 렌더링할 수도 있습니다
const Button1 = styled.button`
  background: ${(props) => (props.color ? props.color : "white")};
`;
//다음과 같은 형식으로도 활용할 수 있습니다.
const Button2 = styled.button`
  background: ${(props) => props.color || "white"};
`;

export default function App() {
  return (
    <>
      <GlobalStyle />
      <Button1>Button1</Button1>
      <Button1 color="orange">Button1</Button1>
      <Button1 color="tomato">Button1</Button1>
      <br />
      <Button2>Button2</Button2>
      <Button2 color="pink">Button2</Button2>
      <Button2 color="turquoise">Button2</Button2>
    </>
  );
}

전역 스타일 설정하기

import { createGlobalStyle } from "styled-components";
const GlobalStyle = createGlobalStyle`
	button {
		padding : 5px;
    margin : 2px;
    border-radius : 5px;
	}
`
function App() {
	return (
		<>
			<GlobalStyle />
			<Button>전역 스타일 적용하기</Button>
		</>
	);
}