[React] Custom Component, Styled Components

Component Driven Development (CDD) & CSS in JS

1. Component Driven Development (CDD)

CDD는 재사용 할 수 있는 UI컴포넌트의 필요성으로 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 진행할 수 있다.
CDD를 활용한 개발 방법은 컴포넌트 단위로 만들어 페이지를 조립하는 개발 방식인 상향식 개발에 가깝다고 할 수 있다.

2. CSS in JS

CSS ▶ SASS ▶ BEM ▶ CSS Modules ▶ Styled Components


인터넷이 만들어진 이후에 기술의 발달과 다양한 디바이스가 생겨나면서 프로젝트의 규모나 복잡도가 심화되었고 함께 작업해야 할 팀원의 수도 많아지게 되면서 CSS는 복잡하게 되었다
➡ 따라서 CSS 작업을 효율적으로 하기 위해서 CSS를 구조화하는 방법에 대한 연구가 필요해졌다.
CSS는 기본적인 스타일링 방법으로 일관된 패턴을 갖기 어려우며 !important의 남용이 단점이다.


▷ CSS 전처리기의 등장
문제점들을 해결하기 위해서 CSS가 구조적으로 작성될 수 있게 도움을 주는 도구인 CSS 전처리기(CSS Preprocessor) 가 등장하게 되었고 프로그래밍 개념(변수, 함수, 상속 등)을 활용하여 해결해 나갈 수 있었다. CSS 파일들을 구조화할 수 있게 되었으며 몇개의 작은 파일로 분리할 수 있게 되었다.
➡ CSS 전처리기 자체만으로는 웹 서버가 인지하지 못하므로 Compiler를 사용해서 CSS 문서로 변환을 하는 작업이 필요했다.


▷ CSS 전처리기의 등장 - SASS(Syntactically Awesome Style Sheets)
CSS 전처리기 중에서 가장 유명하며 CSS를 확장해주는 스크립팅 언어이다.
자바스크립트처럼 특정 속성의 값을 변수를 선언하여 반복되는 코드를 여러 곳에서 재사용할 수 있도록 해주며 SCSS 코드를 읽어서 전처리한 다음 컴파일하여 전역 CSS 번들 파일을 만들어주는 전처리기의 역할을 한다.
➡전처리 과정이 필요하며 디버깅의 어려움이 있고, 컴파일한 CSS 파일이 커지게 되는 문제점이 있다.

//CSS 사용
.button{
   color: rgba(190, 82, 149, 0.87)
}
//SASS 변수 사용 - 반복되는 CSS코드는 변수를 활용하여 재사용, 변수를 선언할 때는 $ 기호를 사용 
$base-color: rgba(190, 82, 149, 0.87)
.button {
   color: $border-dark
 }

▷ BEM, OOCSS, SMACSS - CSS 방법론
CSS 전처리기의 문제를 보완하기 위해 CSS 방법론이 나오게 되었고 모두 같은 지향점을 가지고 있었다
➡코드의 재사용, 코드의 간결화(유지 보수 용이), 코드의 확장성, 코드의 예측성(클래스 명으로 의미 예측)
여러 팀원이 함께 작업하는 환경에서 CSS작성의 규칙을 정하는 것은 매우 중요한 요소라고 할 수 있다.

//BEM 사용예제
//Block   Element    Modifier
.header_navigation--navi-text {
   color: blue;
 }

BEM은 Block(전체를 감싸고 있는 블럭 요소), Element(블럭이 포함하고 있는 한 조각), Modifier(블럭 또는 요소의 속성)로 구분하여 클래스명을 작성하며, -와 _로 구분한다. 이름을 여러 번 반복하여 재사용 할 수 있도록 하여 일관된 코딩 구조를 만들어 주었다
➡클래스명 선택자가 길어지면서 마크업이 불필요하게 커지게 되고, 재사용 할 때마다 모든 UI 컴포넌트를 명시적으로 확장해야했고 진정한 캡슐화의 개념이 없어지게 되었다.


▷ CSS-in-JS / Styled-Commponent
애플리케이션으로 개발 방향이 진화되었고 컴포넌트 단위의 개발로 캡슐화의 중요성이 커지게 되었다. CSS in JS는 CSS도 컴포넌트 영역에서 사용할 수 있게 되었고 그 중에서 대표적으로는 Styled-Component가 있다.
Styled-Component는 기능적 혹은 상태를 가진 컴포넌트들로부터 UI를 완전히 분리해서 사용할 수 있다
CSS를 컴포넌트 안으로 캡슐화, 네이밍이나 최적화를 신경 쓸 필요가 없다.
➡빠른 페이지 로드에는 불리하다

Styled Components 사용법

CSS in JS 개념에서 나온 React 환경에서 사용이 가능한 라이브러리이며 기존의 HTML, CSS, JS 파일을 쪼개서 개발하던 방법에서 Javascript 안에서 HTML + JS + CSS까지 묶어서 JS파일 안에서 컴포넌트 단위로 개발할 수 있으며 현재 가장 인기 있는 라이브러리라고 할 수 있다.

[ Styled Components 설치방법 ]

//npm
$ npm install --save styled-components

//yarn
$ yarn add styled-components

/*styled Components 설치시 package.json에 아래 코드를 추가하도록 권장하고 있다
  여러 버전이 설치되어 발생하는 문제를 줄어준다 */
 
 {
  "resolutions": {
    "styled-components": "^5"
  }
}

//Style Components를 사용할 파일로 불러오기
import styled from "styled-components"

[ Styled Components 문법 ]

1. 컴포넌트 만들기
Templete Literals 문법을 사용, 백틱(`)을 사용하며 컴포넌트를 선언한 후 styled.태그종류를 할당한다. 백틱 안에 기존의 CSS 문법을 사용하여 스타일 속성을 작성하며 이렇게 만든 컴포넌트를 React 컴포넌트를 사용하듯 리턴문 안에 작성한다.

//사용법
const 컴포넌트이름 = styled.태그종류`
  css속성: 속성값;
`;

//사용예제
import styled from "styled-components";

const Button = styled.button`
  background-color: green;
`;

export default function App() {
    return <Button>Button</Button>
}

2. 컴포넌트를 재활용해서 새로운 컴포넌트 만들기
컴포넌트를 선언하고 styled( )에 재활용할 컴포넌트를 전달한 후 추가하고 싶은 스타일 속성을 작성한다.

//사용법
const 컴포넌트이름 = styled(재활용할 컴포넌트)`
  추가할 css속성: 속성값;
`;

//사용예제
import styled from "styled-components";

const Button = styled.button`
  background-color: green;
`;

const BigButton = styled(Bigbutton)`
  padding: 20px;
  border: 2px;
`;

export default function App() {
  return (
    <>
      <Button>Button</Button>
      <br />
      <BigButton>Big Button</Big Button>
    </>
  );
}

3. Props 활용하기
Styled Component로 만든 컴포넌트도 props를 이용하여 내려준 값을 사용할 수 있다
템플릿 리터럴 문법 ( ${ } )을 사용하여 JavaScript 코드를 사용하고 props를 인자로 받는 함수를 만들어 사용한다.

//props 조건부 렌더링 : 삼항연산자를 사용하기

import styled from "styled-components";

const Button = styled.button`
  background: ${(props) => (props.orange ? "orange" : "pink")};
`;

export default function App() {
  return (
    <>
      <Button>Button</Button>
      <Button orange>Button</Button>
    </>
  );
}
//props 값으로 렌더링 

import styled from "styled-components";

//props.color가 있다면 props.color 적용, 삼항연산자 사용
const Button1 = styled.button`
  background: ${(props) => (props.color ? props.color : "skyblue")};
`;

const Button2 = styled.button`
  background: ${(props) => props.color || "skyblue")};
`;

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

4. 전역 스타일 설정하기
전역에 스타일을 설정, Styled Components에서 createGlobalStyle 함수를 불러온 후 설정해주고 싶은 스타일을 작성한다.
컴포넌트를 만든 후 최상위 컴포넌트에서 사용해주면 전역에 스타일이 적용한다.

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
	button {
		padding : 5px;
    margin : 3px;
    border-radius : 10px;
	}
    
    
function App() {
	return (
		<>
		   <GlobalStyle />
		   <Button>전역 스타일 적용</Button>
		</>
	);
}