✅ TIL

---

오늘은 전에 다뤄봤었던 Styled-Components 에 대해 배운다.
이것이 CDD이며, 또 다른 툴인 Storybook 이라는 것이 있다는 사실을 처음 알게되었다.

먼저 이러한 방법이 등장하게 된 배경인 Component Driven Development(CDD)와 CSS-in-JS에 대해서 다뤄보겠다.

Component Driven Development

---

CDD

페이지가 모두 완성되었는데, 다른 페이지에 적용되는 버튼에 대한 추가적인 기획안이 도착했다.

어? 그런데 기획자가 요청한 사항에서 버튼에 대한 기획이 이전에 요청받았던 버튼을 똑같이 사용하도록 요청했다면?
디자이너와 개발자는 이 부분을 모두 새로 만들어야 하는 걸까?

답은 아니다.
디자인과 개발 단계에서부터 재사용할 수 있는 UI 컴포넌트를 미리 디자인하고 개발하면 이런 고민을 해결할 수 있다.

이 고민을 해결하기 위해 등장한 개발 방법이 바로 Component Driven Development (CDD) 이다.

레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 진행할 수 있다.

CSS in JS

인터넷이 만들어진 이후 기술의 발달과 함께 사용자들은 다양한 환경(디바이스)에서 인터넷을 사용하기 시작했다.
이에 따라 개발자들의 CSS 작성 방식도 꾸준히 진화해 오고 있다.

프로젝트의 규모나 복잡도가 점점 커지고 함께 작업해야 할 팀원 수도 많아짐에
따라 CSS를 작성하는 일관된 패턴이 없다는 것은 개발자들에게 가장 큰 걸림돌이 되었다.

또한 모바일이나 태블릿을 비롯한 다양한 디바이스들의 등장으로 웹사이트들이
다양한 디스플레이를 커버해야 하기 때문에 CSS는 더 복잡해지게 되었다.

이러한 문제점들을 해결하기 위해 CSS 전처리기(CSS Preprocessor)라는 개념이 등장했다.

CSS 전처리기(CSS Preprocessor)란 CSS가 구조적으로 작성될 수 있게 도움을 주는 도구이다.

하지만 이 CSS 전처리기(CSS Preprocessor) 자체만으로는 웹 서버가 인지하지 못하기 때문에
각 CSS 전처리기에 맞는 Compiler를 사용해야 하고 컴파일을 하게 되면 실제로 우리가 사용하는 CSS 문서로 변환이 된다.

이를 통해 CSS 파일들을 잘 구조화할 수 있게 되었고, 최소한 CSS 파일을 작은 파일로 분리할 수 있는 방법이 생겼다.

CSS 전처리기 중에서 가장 유명한 SASS는
Syntactically Awesome Style Sheets의 약자로 CSS를 확장해 주는 스크립팅 언어이다.

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

그래서 SASS는 SCSS 코드를 읽어서 전처리한 다음 컴파일해서
전역 CSS 번들 파일을 만들어 주는 전처리기(preprocessor)의 역할을 한다.

하지만 얼마 지나지 않아서 SASS가 ‘CSS의 구조화’를
해결해주는 것의 장점보다 다른 문제들을 더 많이 만들어낸다는 것이 밝혀졌다.

결국 우리는 전처리기(preprocessor)가 내부에서 어떤 작업을 하는지는 알지 못한 채, 스타일이 겹치는 문제를 해결하기 위해 단순히 계층 구조를 만들어 내는 것에 의지하게 되었고, 그 결과 컴파일된 CSS의 용량은 어마어마하게 커지게 되었다.

이러한 CSS 전처리기의 문제를 보완하기 위해 BEM, OOCSS, SMACSS 같은 CSS 방법론이 대두되었다.
각각의 장단점이 있으나 결국 세 방법론 모두 같은 지향점을 가지고 있다.

방법론의 공통 지향점은 다음과 같다.

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

이런 CSS 방법론들은 같이 일하는 팀 동료들의 팀워크와도 연결되기 때문에 여러 팀원이 함께
작업하는 상황에서 CSS 작성에 있어서 방법들을 규칙으로 정해두는 것은 매우 중요한 요소라고 할 수 있다.

대표적인 CSS 방법론으로는 BEM이 있다.

BEM이란 Block, Element, Modifier로 구분하여 클래스명을 작성하는 방법이며,
Block, Element, Modifier 각각은 —와 __로 구분한다.

클래스명은 BEM 방식의 이름을 여러 번 반복하여 재사용할 수 있도록 하며
HTML/CSS/SASS 파일에서도 더 일관된 코딩 구조를 만들어 준다.

하지만 이러한 방법론들에서도 문제점이 발생하기 시작한다. 클래스명 선택자가 장황해지고, 이런 긴 클래스명 때문에 마크업이 불필요하게 커지며, 재사용하려고 할 때마다 모든 UI 컴포넌트를 명시적으로 확장해야만 했다.

또한 SASS와 BEM도 고치지 못했던 몇 가지 문제들은 언어 로직 상에 진정한 캡슐화(encapsulation : 객체의 속성과 행위를 하나로 묶고 실제 구현 내용 일부를 외부에 감추어 은닉하는 개념)의 개념이 없다는 것이었고, 이로 인해 개발자들이 유일한 클래스명을 선택하는 것에 의존할 수밖에 없었다.

애플리케이션으로 개발 방향이 진화하면서 컴포넌트 단위의 개발은 캡슐화의 중요성을 불러왔다.
하지만 CSS는 컴포넌트 기반의 방식을 위해 만들어진 적이 한 번도 없었다.

결국 CSS도 컴포넌트 영역으로 불러들이기 위해서 CSS-in-JS가 탄생해서 이 문제를 정확하게 해결한다.

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

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

CSS 방법론들의 특징, 장단점 overview

CDD 개발 도구

---

Styled Components

CSS 코드를 다룰 때 다음과 같은 불편함을 느껴본 적 있는가?

• class, id 이름을 짓느라 고민한 적이 있다.
• CSS 파일 안에서 내가 원하는 부분을 찾기 힘들었다.
• CSS 파일이 너무 길어져서 파일을 쪼개서 관리해 본 적이 있다.
• 스타일 속성이 겹쳐서 내가 원하는 결과가 나오지 않은 적이 있다.

이 외에도 여러 가지 어려움이 있을 수 있다. 이런 불편함을 CSS를 컴포넌트화 시킴으로써 해결해 주는 라이브러리가 있다.
바로 React 환경에서 사용 가능한 Styled Components라는 라이브러리이다.

Styled Components는 앞서 배운 CSS in JS라는 개념이 대두되면서 나온 라이브러리이다.

기존에 HTML, CSS, JS 파일로 쪼개서 개발하던 방법에서, React 등의 라이브러리의 등장으로
컴포넌트 단위 개발이 주류가 되었지만, CSS는 그렇지 못했다는 점에서 출발한 개념이다.

CSS in JS 라이브러리를 사용하면 CSS도 쉽게 Javascript 안에 넣어줄 수 있으므로,
HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있게 된다.

Styled Components 설치하기

// Styled Components 라이브러리를 설치
# with npm
$ npm install --save styled-components@latest

# with yarn
$ yarn add styled-components

// 그 다음 Styled Components를 사용할 파일로 불러와주면 사용 준비는 완료!
import styled from "styled-components"

Styled Components 문법

1. 컴포넌트 만들기

Styled Components는 ES6의 Templete Literals 문법을 사용한다. 즉, 따옴표가 아닌 백 틱(`)을 사용한다.

컴포넌트를 선언한 후 styled.태그 종류를 할당하고, 백 틱 안에 기존에 CSS를 작성하던 문법과 똑같이 스타일 속성을 작성해 주면 된다. 이렇게 만든 컴포넌트를 React 컴포넌트를 사용하듯 리턴문 안에 작성해 주면 스타일이 적용된 컴포넌트가 렌더 되는 것을 확인할 수 있다.

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

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

이미 만들어진 컴포넌트를 재활용해서 새로운 컴포넌트를 만들 수도 있다.

컴포넌트를 선언하고 styled()에 재활용할 컴포넌트를 전달해 준 다음, 추가하고 싶은 스타일 속성을 작성해 주면 된다.

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

3. Props 활용하기

Styled Component로 만든 컴포넌트도 React 컴포넌트처럼 props를 내려줄 수 있다.
내려준 props 값에 따라서 컴포넌트를 렌더링 하는 것도 가능하다.

Styled Components는 템플릿 리터럴 문법(${ })을 사용하여 JavaScript 코드를 사용할 수 있다.
props를 받아오려면 props를 인자로 받는 함수를 만들어 사용하면 된다.

⚙️ 1. Props로 조건부 렌더링하기

위 코드의 경우는 삼항 연산자를 활용해 Button 컴포넌트에 skyblue라는 props가 있는지 확인하고, 있으면 배경색으로 skyblue를, 없을 경우 white를 지정해 주는 코드이다. 아래는 렌더링 된 Button 컴포넌트 결과이다.

Button1의 경우는 skyblue라는 props가 있어 배경색이 skyblue로 지정됐고,
Button2의 경우는 props가 아예 없어 배경색이 white로 지정된 것을 확인할 수 있다.

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 값으로 렌더링하기

3번과 비슷하게, props의 값을 통째로 활용해서 컴포넌트 렌더링에 활용할 수 있다.

똑같이 삼항 연산자를 사용하고 있지만, 이번에는 props.color가 없다면 white를, props.color가 있다면 props.color의 값을 그대로 가져와서 스타일 속성 값으로 리턴해주고 있는 것을 볼 수 있다. 그 결과 color라는 이름으로 받은 props의 값으로 배경색이 지정된 것을 확인할 수 있다.

꼭 삼항 연산자만 사용해야 하는 것은 아니다.

JavaScript 코드라면 무엇이든 사용할 수 있으므로 원하는 값을 사용할 수 있도록 함수 코드를 만들어서 사용하면 된다.

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

4. 전역 스타일 설정하기

스타일을 컴포넌트로 만들 수 있다는 것은 좋지만, 전역에 스타일을 설정하고 싶을 땐 어떻게 하면 좋을까?
물론 Styled Components는 이런 경우를 대비한 컴포넌트도 준비해 놓았다.

우선 전역 스타일을 설정하기 위해 Styled Components에서 createGlobalStyle 함수를 불러온다.
그다음 이 함수를 사용해 CSS 파일에서 작성하듯 설정해 주고 싶은 스타일을 작성한다.

import { createGlobalStyle } from "styled-components";

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

function App() {
	return (
		<>
			<GlobalStyle />
			<Button>전역 스타일 적용하기</Button>
		</>
	);
}

이렇게 만들어진 GlobalStyle 컴포넌트를 최상위 컴포넌트에서 사용해 주면, 전역에 GlobalStyle 컴포넌트의 스타일이 적용된다.

Styled Components 관련 익스텐션 소개

Styled Components를 사용할 때, CSS 코드를 템플릿 리터럴을 사용해서 작성하게 된다.

즉, CSS 코드를 문자열로 작성하는 것이기 때문에, 아래 이미지처럼 VSCode에서 코드 작성 시,
CSS 파일에서 작성하는 것처럼 자동 완성 기능을 사용할 수 없다.

이때 도움이 되는 VSCode 익스텐션이 있다. 바로 VSCode-Styled-Components라는 익스텐션이다.

VSCode 좌측의 Extensions 버튼을 클릭한 후, Vscode-Styled-Components를 검색했을 때나오는 첫 번째 익스텐션을 설치하면 된다.

Storybook

Storybook은 UI 개발 즉, Component Driven Development를 하기 위한 도구이다.

각각의 컴포넌트들을 따로 볼 수 있게 구성해 주어 한 번에 하나의 컴포넌트에서 작업할 수 있다.

복잡한 개발 스택을 시작하거나, 특정 데이터를 데이터베이스로 강제 이동하거나,
애플리케이션을 탐색할 필요 없이 전체 UI를 한눈에 보고 개발할 수 있다.

Storybook은 재사용성을 확대하기 위해 컴포넌트를 문서화하고, 자동으로 컴포넌트를 시각화하여 시뮬레이션할 수 있는 다양한 테스트 상태를 확인할 수 있다. 이를 통해 버그를 사전에 방지할 수 있도록 도와준다.
또한 테스트 및 개발 속도를 향상하는 장점이 있으며, 애플리케이션 또한 의존성을 걱정하지 않고 빌드할 수 있다.

Storybook에서 지원하는 주요 기능은 다음과 같다.

• UI 컴포넌트들을 카탈로그화하기
• 컴포넌트 변화를 Stories로 저장하기
• 핫 모듈 재 로딩과 같은 개발 툴 경험을 제공하기
• 리액트를 포함한 다양한 뷰 레이어 지원하기

사용 방법

먼저 리액트 프로젝트 폴더가 생성되면, 폴더 안에서 다음 명령어를 입력하여 Storybook을 설치한다.

npx storybook@latest init

이 명령어는 package.json을 보고 사용 중인 프론트엔드 라이브러리에 맞는 Storybook 사용환경을
알아서 만들어주기 때문에, 꼭 React가 아니더라도 다양한 프론트엔드 라이브러리에서 사용할 수 있다.

Storybook 설치가 완료되면, /.storybook 폴더와 /src/stories 폴더가 생성된 것을 확인할 수 있다.
/.storybook 폴더에는 Storybook 관련 설정 파일이, /src/stories 폴더에는 Storybook 예시 파일들이 들어있다.

이제 터미널 창에 다음 명령어를 입력하여 Storybook을 실행하면 된다.

npm run storybook

명령어를 입력하면 React가 localhost:3000으로 접근하듯이, localhost:6006으로 접근하여 Storybook을 실행시킨다.

Storybook을 실행하면 /src/stories 폴더 안에 있던, Storybook에서 만들어놓은 예시 스토리를 확인할 수 있다.

이렇게 Storybook을 사용하면 애플리케이션을 실행하고 이벤트를 통해 상태를
변경하는 과정을 거치지 않아도 상태 변화에 따른 컴포넌트의 변화를 확인할 수 있다.

작성 방법

이제 직접 Storybook 코드를 작성해보자.
그 전에, 튜토리얼을 진행하면서 사용할 Styled-Components를 먼저 설치한다.

npm install styled-components

설치를 완료했다면, 간단한 스토리를 직접 작성해 보자.

src 폴더 안에 Title.js 파일을 하나 만들고, 다음과 같은 간단한 React 컴포넌트를 하나 만들어 export 해준다.

import React from "react";

// title은 h1 요소의 textContent, textColor은 글자색이 되는 props입니다.
const Title = ({title, textColor}) => (
<h1 style={{color: textColor}}>{title}</h1>
);

export default Title;

그리고 같은 위치인 src 폴더 안에 Title.stories.js 파일을 하나 만든다.

/.storybook 안에 있는 Storybook 설정 파일에 의해서 컴포넌트 파일과
똑같은 파일 이름에 .stories를 붙여 파일을 만들면 알아서 스토리로 인식한다.

Title.stories.js 는 다음과 같이 작성한다.

// 앞에서 작성한 컴포넌트를 불러옵니다.
import Title from "./Title";

// title : 컴포넌트 이름으로, '/'를 넣어 카테고리화할 수 있습니다.
//         이후 예시에서 조금 더 자세히 설명합니다.
// component : 어떤 컴포넌트를 가져와서 스토리로 만들 것인지 명시합니다.
// argTypes : 컴포넌트에 필요한 전달인자의 종류와 타입을 정해줍니다.
//            지금은 title, textColor이라는 전달인자에 text 타입이 필요함을 의미합니다.
export default {
    title: "Practice/Title", 
    component: Title,
    argTypes: {
        title: { control: "text" },
        textColor: {control: "text"}
    }
}

// 템플릿을 만들어줍니다. 이 템플릿에서는
// Title 컴포넌트가 args를 전달받아 props로 내려줍니다.
const Template = (args) => <Title {...args} />

// Storybook에서 확인하고 싶은 컴포넌트는 export const로 작성합니다.
// 템플릿을 사용하여 Storybook에 넣어줄 스토리를 하나 만들어주었습니다.
// Template.bind({}); 는 정해진 문법이라고 생각하고 사용하시면 됩니다.
export const RedTitle = Template.bind({});

// 만들어준 스토리의 전달인자를 작성해줍니다.
RedTitle.args= {
    title: "Red Title",
    textColor: "red"
}

// 스토리를 하나 더 만듭니다.
export const BlueTitle = Template.bind({});

// 스토리의 전달인자를 작성해줍니다.
BlueTitle.args= {
    title: "Blue Title",
    textColor: "blue"
}

Title.stories.js 파일을 저장하고 Storybook을 확인해 보자.
Storybook은 핫 모듈 리로딩을 지원하기 때문에 따로 새로고침을 하지 않아도 변경 사항을 바로 확인할 수 있다.

• title: “Practice/Title” 로 작성해 준 코드가 좌측 메뉴에서 카테고리로 적용된 것을 확인할 수 있다.
  이렇게 Practice라는 카테고리에 Title 외의 스토리도 담아줄 수 있다.
• title.stories.js 안에서 템플릿을 사용해 만든 두 개의 스토리가 Title 안에 들어있는 것을 볼 수 있다.
  각 스토리에서는 작성해 준 전달인자도 확인할 수 있고, 전달인자에 따라 결과물이 달라진 것도 볼 수 있다.
  
  

이번에는 전달인자를 직접 받는 스토리를 만들어보자.
앞서 만들었던 두 스토리 바로 밑에 다음과 같은 스토리를 하나 더 작성해 준다.

...
export const StorybookTitle = (args) =>{
    return <Title {...args} />
}

이 스토리는 템플릿을 활용하지 않고 바로 전달인자를 받고 있다. 저장 후 다시 Storybook을 확인해 보자.

이번에 만든 스토리는 전달 인자를 직접 작성해 주면 거기에 맞춰 모습이 변하는 것을 볼 수 있다.

이번에는 전달 인자를 직접 받으면서, Styled Components를 사용해서 만든 컴포넌트를 스토리로 만들어보자.
우선, Button.js라는 파일을 하나 만들고 다음과 같은 컴포넌트를 작성한다.

Button.stories.js는 다음과 같이 작성해 준다.

// 컴포넌트를 불러옵니다.
import Button from "./Button";

export default {
    title: "Practice/Button",
    component: Button,

		// 이번에 작성한 전달인자의 타입은 Storybook을 보고 직접 확인해보세요.
    argTypes: {
        color: { control: 'color'},
        size: { control: { type:'radio'}, options : ['big', 'small'] },
        text: { control: 'text'}
    }
};

export const StorybookButton = (args) => (
    <Button {...args}></Button>
)

이번에 만든 스토리에서는 control: ‘color’와 control: { type: ‘radio’, options: [] }가
각각 어떤 형태로 인자를 전달해 주는지 확인해 보면 된다.

useRef

---

React를 공부하면서, React 애플리케이션을 만들 때 DOM을 직접 조작하는 것은 지양해야 한다고 배웠다.
하지만, 개발을 하다 보면 DOM을 직접 건드려야 하는 상황이 발생하기도 한다.

이럴 때 사용할 수 있는 것이 바로 useRef라는 Hook 함수이다.

지금까지는 React만 가지고 거의 대부분의 프론트엔드 요구사항을 구현할 수 있었다.
하지만 React로 모든 개발 요구 사항을 충족할 수는 없다.

아래와 같이 DOM 엘리먼트의 주소값을 활용해야 하는 경우 특히 그렇다.

• focus
• text selection
• media playback
• 애니메이션 적용
• d3.js, greensock 등 DOM 기반 라이브러리 활용

React는 이런 예외적인 상황에서 useRef로 DOM 노드, 엘리먼트, 그리고 React 컴포넌트 주소값을 참조할 수 있다.

const 주소값을_담는_그릇 = useRef(참조자료형)
// 이제 주소값을_담는_그릇 변수에 어떤 주소값이든 담을 수 있습니다.
return (
    <div>
      <input ref={주소값을_담는_그릇} type="text" />
        {/* React에서 사용 가능한 ref라는 속성에 주소값을_담는_그릇을 값으로 할당하면*/}
        {/* 주소값을_담는_그릇 변수에는 input DOM 엘리먼트의 주소가 담깁니다. */}
        {/* 향후 다른 컴포넌트에서 input DOM 엘리먼트를 활용할 수 있습니다. */}
    </div>);

이 주소값은 컴포넌트가 re-render 되더라도 바뀌지 않는다.
이 특성을 활용하여 아래의 제한된 상황에서 useRef를 활용할 수 있다.

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>);
}

제시된 상황 제외한 대부분의 경우 기본 React 문법을 벗어나 useRef를 남용하는 것은 부적절하고,
React의 특징이자 장점인 선언형 프로그래밍 원칙과 배치되기 때문에, 조심해서 사용해야 한다.