CH1. Component Driven Development

📌 CDD

🔸 컴포넌트를 모듈 단위로 개발하여 UI 구축에 도달하는 개발 및 설계 방법론.
🔸 기본적인 컴포넌트 단위부터 시작해서 UI 뷰를 구성하기 위해 점진적으로 조립(결합)해가는 상향적 성향을 띔.

• 기존 CSS문서를 작성할 때는 Color값 찾기, tag 닫기 등 번거로운 작업이 반복적으로 요구되고 있음.
• 뿐만아니라 클래스 상속과 같은 일로 점점 CSS 문서는 양이 많아지고 이로 인해 유지관리에 많은 영향을 끼침.
• 이러한 문제들을 프로그래밍 개념(변수, 함수, 상속 등)을 활용해 해결할 수 있음.

📌 CSS in JS

CSS Preprocessor (CSS 전처리기)

🔸 CSS가 구조적으로 작성될 수 있게 도와주는 도구.
🔸 CSS 전처리기 자체만으로는 웹 서버가 인지하지 못하기 때문에 각 CSS 전처리기에 맞는 Compiler를 사용해 컴파일하여 CSS 문서로 변환시킴.

Syntactically Awesome Style Sheets (SASS)
🔸 CSS 전처리기 중 하나로 CSS를 확장해주는 스크립팅 언어.
🔸 SCSS 코드를 읽어서 전처리한 다음 컴파일해서 전역 CSS 번들 파일을 만들어 주는 전처리기(preprocessor)의 역할

🔸 자바스크립트처럼 특정 속성(ex. color, margin, width 등)의 값(ex. #ffffff, 25rem, 100px 등)을 변수로 선언하여 필요한 곳에 선언된 변수를 적용하거나 반복되는 코드를 한 번의 선언으로 여러 곳에서 재사용할 수 있도록 해 주는 등의 기능을 가짐.

• 그러나 CSS의 용량이 커지고 컴파일을 해주어야한다는 단점이 있음.
• CSS 전처리기의 문제를 보완하기 위해 BEM, OOCSS, SMACSS 같은 CSS 방법론이 나타남.

CSS 방법론

🔸 좀 더 효율적으로 CSS를 사용할 수 있도록 CSS네이밍, 작성 방법 등에 규칙을 두어 지키는 것을 말함.

BEM (Block Element Modifier)

• Block--Element__Modifier로 구분하여 클래스명을 작성하는 방법
  • Block : 문단 전체에 적용된 element나 element를 담고 있는 컨테이너. 기능적으로 독립적인 페이지 구성 요소. 블록은 재사용과 중첩이 가능해야 하므로 여백, 위치 등에 영향받지 않도록 해야함.
  • Element : Block 안에서 특정 기능을 수행하는 컴포넌트. 단독으로 사용할 수 없는 블록의 부분적인 구성요소로 블록처럼 중첩해서 사용할 수 있으나 블록에 의존적인 이름을 가짐.
  • Modifier : 사이즈, Boolean 값처럼 블록이나 요소로 알 수 없는 모양, 상태, 행동을 정의
• 소문자, 숫자만을 이용해 작명, 기본적으로 ID를 사용하지 않고 class만을 사용함.

🔸 BEM, OOCSS, SMACSS 각각의 장단점이 있으나 결국 세 방법론 모두 같은 지향점을 가짐.

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

🔸 단점

• 길어지고 복잡해지는 클래스명
• 긴 클래스명으로 인한 길어지는 마크업
• 재사용할 때마다 모든 UI 컴포넌트를 명시적으로 확장
• 진정한 캡슐화 개념의 부재
  • 캡슐화(Encapsulation) : 객체의 속성, 행위를 묶고, 실제 구현 내용 일부를 외부에 감추어 은닉하는 개념.

🔸 이러한 문제들을 해결하기 위해 CSS를 컴포넌트 영역으로 불러들이기 위한 CSS-in-JS가 나타남.

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

CH2. CDD 개발도구

📌 Styled Components

🔸 CSS를 컴포넌트화 시킴으로써 구조적으로 관리하는 React에서 사용 가능한 라이브러리.

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

🔸 HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있음.

🔸 아래와 같은 문제를 해결할 수 있음.

• class, id 이름을 따로 짓지 않아도 됨.
• 컴포넌트에서 독립적으로 사용이 가능하여 태그별로 원하는 부분을 쉽게 찾을 수 있음.
• 중복되는 스타일은 겹치지 않는 부분만 추가하여 재사용 가능.
• JS 구문을 활용할 수 있음 (props, 삼항연산자 등)

Styled Components 설치하기

1. 터미널에 명령어를 입력하여 설치하기
# with npm
$ npm install --save styled-components@latest

# with yarn
$ yarn add styled-components

2. JS 파일에서 불러오기
import styled from "styled-components"

🔸 여러 버전의 Styled Components가 설치되어 생기는 문제를 방지하기 위해 아래의 코드를 package.json에 작성.

{
  "resolutions": {
    "styled-components": "^5"
  }
}

Styled Components 문법

1. 컴포넌트 만들기

🔸 컴포넌트를 선언 후, styled.태그종류를 할당하고, 백틱 안에 기존 CSS 문법을 작성.
🔸 이 컴포넌트를 리턴문안에 작성해주면 스타일이 적용된 컴포넌트가 렌더됨.

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

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

3. Props 활용하기

🔸 props 값에 따라서 컴포넌트를 렌더링 가능
🔸 템플릿 리터럴 문법(${ })을 사용하여 JavaScript 코드를 사용. props를 받아오려면 props를 인자로 받는 함수를 만들어 사용.

1) Props로 조건부 렌더링하기

• 삼항 연산자를 활용해 <Button> 컴포넌트에 skyblue라는 props가 있는지 확인하고, 있으면 배경색으로 skyblue를, 없을 경우 white를 지정해 주는 코드.
• 이 코드에 따라 렌더링 된 <Button> 컴포넌트는 아래 그림과 같음.
  
  2) Props 값으로 렌더링하기
  
  🔸 props의 값을 통째로 활용해서 컴포넌트 렌더링에 활용.
  🔸 props.color가 없다면 white를, props.color가 있다면 props.color의 값을 그대로 가져와서 스타일 속성 값으로 리턴. 그 결과 color라는 이름으로 받은 props의 값으로 배경색이 지정됨.
  

4. 전역 스타일 설정하기

🔸 전역 스타일을 설정하려면, Styled Components에서 createGlobalStyle 함수를 불러옴.

import { createGlobalStyle } from "styled-components";

🔸 이 함수를 사용해 CSS 파일에서 작성하듯 설정해 주고 싶은 스타일을 작성하고, 이렇게 만들어진 <GlobalStyle> 컴포넌트를 최상위 컴포넌트에서 사용해 주면 전역에 <GlobalStyle> 컴포넌트의 스타일이 적용됨.

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

CH2. Storybook

🔸 CDD 방법에 기반하여 각 UI 컴포넌트들을 시각적으로 쉽게 볼 수 있는 개발도구.

🔸 만들어 둔 각 UI 컴포넌트들을 카탈로그처럼 시각적으로 볼 수 있고, 각 props를 설정해보며 수정할 수도 있음.

🔸 UN의 Storybook 페이지

Storybook 특징

🔸 컴포넌트를 문서화하여 회사의 UI 라이브러리로 사용(재사용성 용이)

• 또한, 외부 공개용 디자인 시스템(Design System)을 개발하기 위한 기본 플랫폼으로 사용.

🔸 자동으로 컴포넌트를 시각화하여 시뮬레이션할 수 있음. (이를 통해 버그를 사전에 방지할 수 있도록 도와줌)

🔸 테스트 및 개발 속도를 향상하는 장점이 있으며, 애플리케이션 또한 의존성을 걱정하지 않고 빌드할 수 있음.

🔸 기본적으로 독립적인 개발 환경에서 실행되어, 개발자는 애플리케이션의 다양한 상황에 구애받지 않고 UI 컴포넌트를 집중적으로 개발할 수 있음.

Storybook의 주요 기능

🔸 UI 컴포넌트들을 카탈로그화
🔸 컴포넌트 변화를 Stories로 저장
🔸 핫 모듈 재 로딩과 같은 개발 툴 경험을 제공 (수정 시 바로 적용됨)
🔸 리액트를 포함한 다양한 뷰 레이어 지원

Storybook 설치 & 실행

🔸 React를 통해 사용하는 방법. CRA을 통해 React 프로젝트를 하나 생성하고, 생성된 폴더 안 터미널에 아래의 명령어 입력.

// 설치하기
npx storybook@latest init

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

🔸 Storybook 설치가 완료되면, 아래의 폴더가 생성됨.

• /.storybook : Storybook 관련 설정 파일
• /src/stories : Storybook 예시 파일들

🔸 npm run storybook : localhost:6006으로 접근하여 Storybook을 실행.

Storybook 작성

1. 하나의 컴포넌트로 여러 버전의 Storybook만들기

🔸 Storybook을 만들기 위해 기본이 될 컴포넌트를 먼저 작성.
🔸 아래와 같이 src 폴더에 Button.js 파일을 만들어 기본 Button 컴포넌트를 만듬.

import React from "react";

const Button = ({title, color}) => (
<button style={{color: color}}>{title}</button>
);

export default Button;

🔸 같은 src 폴더 안에 Button.stories.js 파일을 만듬 (/.storybook 안에 있는 storkbook 설정 파일에 의해 컴포넌트 파일명.stories.js로 파일이 자동으로 스토리로 인식됨.

// Button.stories.js
import Title from "./Button";

export default {
    title: "UI Components/Button", // storybook 문서의 카테고리
    component: Button, //스토리로 만들 컴포넌트
  //컴포넌트에 필요한 전달인자의 종류와 타입
    argTypes: {
        title: { control: "text" }, // control 패널에서 직접 텍스트 입력 가능
        color: { control: "text"}, // control 패널에서 직접 컬러 입력 가능
        size: { control: { type:'radio', options : ['big', 'normal', 'small'] }}, // 컨트롤 패널에서 radio타입 버튼으로 big, normal, small의 옵션을 선택 가능
    }
}

//템플릿 생성: Button 컴포넌트가 args를 전달받아 props로 내려준다.
const Template = (args) => <Button {...args} />
//만약 스토리북에서 인자를 직접 받으려면 위의 Template를 그대로 export한다.

//스토리 생성: 스토리는 export const로 템플릿을 사용하여 추가한다.
export const RedButton = Template.bind({}); //뒤의 사항은 거의 정해진 문법이라고 생각하면 좋다.

// 만들어준 스토리에 인자를 전달한다.
RedButton.args= {
    title: "Red Button",
    color: "#ff0000"
}

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

🔸 스토리북을 실행하면 만든 스토리를 해당 카테고리에서 확인할 수 있음.

CH4. useRef

🔸 React를 다룰때 DOM을 직접 조작하는 것은 지양해야함.
🔸 하지만 아래 예시와 같이 DOM 엘리먼트의 주소값을 활용해야 하는 경우가 존재. 이때 사용하는게 Hook 함수 useRef.

🔸 useRef를 사용해야 하는 상황

• focus : 현재 input에서 엔터키를 누르면 다음 input을 포커싱시킬 때. (input 요소를 클릭하지 않고 포커스를 주고 싶을 때)
• media playback : 삽입된 동영상의 재생, 일시정지를 다른 버튼으로 제어하고자 할 때.
• 그 외 애니메이션 적용, text selection 등 DOM의 주소가 필요할 때.
• d3.js, greensock 등 DOM 기반 라이브러리 활용할 때.

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

🔸 아래 예시 코드처럼 작성하면 주소값을 활용할 수 있음.

const 주소값(DOM)을 할당할 임의의 변수 el = useRef(참조자료형)

return (
	<div>
    	<input ref={el} type="text />
        // React에서 사용가능한 ref라는 속성에 변수를 할당하면, 그 변수에는 엘리먼트의 주소가 담김.
        // 향후 다른 컴포넌트에서 이 엘리먼트를 활용할 수 있음.
    </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의 특징이자 장점인 선언형 프로그래밍 원칙과 배치되기 때문에, 조심해서 사용해야 함.

참고 사이트

🔸 styled-components
🔸 Storybook