[TIL] Day47 #CDD #Styled Components #Storybook #useRef

2022.06.30(Thurs)

[TIL] Day47
[SEB FE] Day46

☑️ Component Driven Development (CDD)

➰ 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 진행
➰ 재사용 가능한 컴포넌트 개발 가능
➰ 컴포넌트 단위로 만들어 페이지를 조립하는 개발 방식 ⇒ 상향식 개발

🙌 CSS → SASS → BEM → CSS Modules → Styled Components

➰ 구조화된 CSS 필요성이 대두된 배경

1. 점점 커지는 프로젝트 규모 & 복잡도 (팀원 수 증가 ⬆️)
2. 📱모바일/태블릿 등을 비롯한 다양한 디바이스 등장으로 더 복잡해진 CSS

📎 CSS 전처리기(Preprocessor)

: CSS가 구조적으로 작성될 수 있게 도움을 주는 도구

✋ 각 CSS 전처리기에 맞는 Compiler를 사용해야 함 → 컴파일 후, CSS 문서로 변환

➰ SASS

Syntactically Awesome Style Sheets
🔹 CSS를 확장해 주는 Scripting 언어
🔹 특정 속성 값을 변수로 선언 → 필요한 곳에 선언된 변수 적용
⇒ 반복되는 코드를 선언 1번으로 여러 곳에서 재사용할 수 있도록 해 주는 기능 존재

🙌 Read SCSS Code → 전처리 → 컴파일 → 전역 CSS 번들 파일을 생성해주는 전처리기 역할

✋ 스타일 겹치는 문제 해결을 위해 계층 구조를 만들어 CSS 용량 어마어마하게 커지게 됨 ⬆️

📎 CSS 방법론

➰ 지향점 (BEM, OOCSS, SMACSS)

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

➰ BEM

: Block, Element, Modifier로 구분하여 클래스명을 작성하는 방법 (—-, __ 으로 구분)

.header__navigation—-navi-text {
	color: red;
}

{/* Block: header */}
{/* Element: navigation */}
{/* Modifier: navi-text */}

• Block: 전체를 감싸고 있는 블럭 요소
• Element: 블럭이 포함하고 있는 한 조각
• Modifier: 블럭 또는 요소의 속성

👎 클래스명 선택자 장황 → 불필요한 마크업 ⬆️ → 재사용할 때마다 모든 UI 컴포넌트 명시적 확장 필요

👎 로직 상 진정한 캡슐화 ❌ → 개발자들은 유일한 클래스명 선택에 의존할 수 밖에…

⌘ 캡슐화(encapsulation; 객체 속성&행위를 하나로 묶고 실제 구현 내용 일부를 외부에 감춰 은닉하는 개념)

📎 CSS-in-JS

CSS를 컴포넌트 영역으로 불러들이기 위해 탄생

ex. Styled-Component

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

---

☑️ CDD 개발 도구

📎 Styled Components

➰ 기능적 / 상태를 가진 컴포넌트들로부터 UI를 완전히 분리하여 사용할 수 있는 단순한 패턴
➰ HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있음

# install
# with npm
$ npm install --save styled-components

# with yarn
$ yarn add styled-components

{/* package.json에 코드 추가 권장 -> 여러 버전 Styled Components 설치됨 */}
{
  "resolutions": {
    "styled-components": "^5"
  }
}

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

➰ 컴포넌트 생성

• 컴포넌트 선언 → styled.태그종류 할당 → 백틱 안에 기존 CSS 문법과 똑같이 스타일 속성 작성
• ES6의 Template Literals 문법을 사용하여 백틱(`) 사용

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

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

	// hover 속성은 &:hover으로 처리
	&:hover { 
    background: cornflowerblue;
    color: white;
    transition: 0.5s;
  }
`;

➰ 컴포넌트 재활용 → new 컴포넌트 생성

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

const BigBlueButton = styled(BlueButton)`
  padding: 10px;
  margin-top: 10px;
`

➰ Props 활용

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

// 1) Props로 조건부 렌더링
const Button1 = styled.button`
  background: ${(props) => (props.skyblue ? "skyblue" : "white")};
`;

// 2) Props 값으로 렌더링
const Button2 = styled.button`
  background: ${(props) => (props.color ? props.color : "white")};
`;

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

➰ 전역 스타일 설정

import { createGlobalStyle } from "styled-components";

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

export default GlobalStyle;

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

// ... 위에서 선언 대체

function App() {
  return (
    <>
      <BlueButton>Blue Button</BlueButton>
      <br />
      <BigBlueButton>Big Blue Button</BigBlueButton>
      
			{/* 전역 스타일인 <GlobalStyle/> 컴포넌트를 최상위 컴포넌트에서 사용 */}
			<GlobalStyle />
      <Button1>Button1</Button1>
      <Button1 skyblue>Button1</Button1>
      <br />
      <Button2>Button2</Button2>
      <Button2 color="orange">Button2</Button2>
      <Button2 color="tomato">Button2</Button2>
      <br />
      <Button3>Button3</Button3>
      <Button3 color="pink">Button3</Button3>
      <Button3 color="turquoise">Button3</Button3>
    </>
  );
}

export default App;

📎 Storybook

CDD를 지원하는 도구 중 하나로 Component Explorer(컴포넌트 탐색기) 등장
컴포넌트 탐색기엔 많은 UI 개발 도구가 있는데 그 중 하나가 Storybook
⇒ UI 개발 즉, CDD를 하기 위한 도구

• 각각의 컴포넌트들을 따로 구성 → 한번에 하나의 컴포넌트에서 작업 가능
• 재사용성 확대를 위해 컴포넌트를 문서화하고,
  자동으로 컴포넌트를 시각화하여 시뮬레이션할 수 있는 다양한 테스트 상태 확인 가능

👍  버그 사전 방지
👍 테스트 및 개발 속도 향상
👍 의존성 걱정하지 않고 애플리케이션 빌드 가능

➰ Why UI개발도구(Storybook) 사용?

: Storybook은 기본적으로 독립적인 개발 환경에서 실행
⇒ 개발자는 애플리케이션의 다양한 상황에 구애받지 않고 UI 컴포넌트를 집중적으로 개발 가능

✋ 이벤트를 통해 상태를 변경하는 과정을 거치지 않아도 상태 변화에 따른 컴포넌트 변화 확인 가능

➰ Storybook 주요 기능

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

➰ Storybook 사용해보기

# install
# package.json을 보고 사용중인 FE 라이브러리에 맞는 Storybook 사용환경을 알아서 만들어줌
npx storybook init

# Storybook 실행
npm run storybook

// src/Title.js

import React from "react";

const Title = ({ title, textColor }) => (
  <h1 style={{ color: textColor }}>{title}</h1>
);

export default Title;

// src/Title.stories.js

import Title from "./Title";

export default {
  title: "Practice/Title", // 컴포넌트 이름으로, Storybook에서 카테고리로 적용
  component: Title, // 어떤 컴포넌트를 가져와서 Story로 만들 것인지 명시
  argTypes: {  // 컴포넌트에 필요한 전달인자 종류&타입 
    title: { control: "text" },
    textColor: { control: "text" },
  },
};

// 템플릿 생성
// Title 컴포넌트가 args를 전달받아 props로 내려줌
const Template = (args) => <Title {...args} />;

// Storybook에서 확인하고 싶은 컴포넌트 작성
// 템플릿을 사용해서 Storybook에 넣어줄 story를 만들어줌
export const RedTitle = Template.bind({});

// 만들어준 story의 전달인자 작성
RedTitle.args = {
  title: "Red Title",
  textColor: "red",
};

// Controls 직접 설정가능한 Story
export const StorybookTitle = (args) => {
  return <Title {...args} />;
};

// 또 다른 Button 예제
// src/Button.js

import React from "react";
import styled from "styled-components";

const StyledButton = styled.button`
  // props.color가 있으면 props.color, 아니면 흰색을 배경색으로 사용
  background: ${(props) => props.color || "white"};

  // props.size가 'big'이면 200px, 아니면 100px를 너비로 사용
  width: ${(props) => (props.size === "big" ? "200px" : "100px")};

  // props.size가 'big'이면 80px, 아니면 40px를 높이로 사용
  height: ${(props) => (props.size === "big" ? "80px" : "40px")};
`;

const Button = ({ color, size, text }) => (
  <StyledButton color={color} size={size}>
    {text}
  </StyledButton>
);

export default Button;

// src/Button.stores.js

import Button from "./Button";

export default {
  title: "Practice/Button",
  component: Button,
	// 어떤 형태로 인자를 전달해주는지 확인하기!
  argTypes: {
    color: { control: "color" },
    size: { control: { type: "radio", options: ["big", "small"] } },
    text: { control: "text" },
  },
};

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

---

☑️ useRef

DOM element 주소값을 활용해야 하는 경우, DOM을 건드려야 할 때가 생길 수 있음
이러한 예외적인 상황에서 useRef로 DOM 노드, element, React 컴포넌트 주소값을 참조할 수 있음.

// 어떤 주소값이든 담을 수 있음.
const 주소값_담는_그릇 = useRef(참조자료형);

return(
	<div>
		<input ref={주소값_담는_그릇} type="text" />
		{/* 주소값_담는_그릇 변수에 input DOM element 주소가 담김 */}
		{/* 다른 컴포넌트에서 input DOM element 활용 가능 */}
	</div>
);

✋ 이러한 주소값은 컴포넌트가 re-render되도 바뀌지 않음.

// useRef 활용 예제

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

오늘도 밖에서 밥 먹고 오는 바람에 저녁 공부 조금 늦게 시작..
할 공부가 넘 많다. 맨날 계획만 장황하게 세워놓고 다 지키지도 못함;🫠

☑️ 프로그래머스 Lv.1같은 숫자는 싫어 문제 풀기
☑️ 한입 리액트 JS 응용 파트 강의 듣기
☑️ Coplit 배열 문제 복습
☑️ Udemy 알고리즘&자료구조빅오표기법 강의 듣기
☑️ Udemy React_Section 1 강의 듣기