S3) Unit 3. [React] Custom Component

📣 CDD

✔️ Component-Driven Development(CDD)
➰ 부품 단위로 UI 컴포넌트를 만들어 나가는 개발
➰ 재사용할 수 있는 컴포넌트를 개발할 수 있다.

📣 CSS in JS

➰ 다양한 디바이스들의 등장으로 웹사이트들이 다양한 디스플레이를 커버해야 하기 때문에 CSS는 더 복잡해지게 되었다.
➰ 이를 해결하기 위해 CSS 전처리기가 등장헀다.

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

✔️ SASS(Syntactically Awesome Style Sheets)
➰ CSS 전처리기 중 가장 유명하며, CSS를 확장해 주는 스크립팅 언어이다.
➰ CSS를 만들어주는 언어로서 자바스크립트처럼 특정 속성의 값을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수 있고, 반복되는 코드를 한 번의 선언으로 여러 곳에서 재사용 할 수 있도록 해주는 등의 기능이 있다.
➰ SASS는 SCSS 코드를 읽어서 전처리한 다음 컴파일해서 전역 CSS 번들 파일을 만들어주는 '전처리기' 역할을 한다.
➰ 하지만 장점보다 단점을 더 많이 발견하게 된다.

✔️ BEM, OOCSS, SMACSS
➰ SASS의 문제를 보완하기 위한 CSS 방법론
➰ '코드의 재사용', '코드의 간결화', '코드의 확장성', '코드의 예측성' 을 공통으로 지향한다.

✔️ BEM
➰ Block, Element, Modifier로 구분하여 클래스명을 작성하는 방법
➰ Block, Element, Modifier은 각각 -와 _로 구분한다.
➰ 클래스명은 BEM 방식의 이름을 여러 번 반복하여 재사용할 수 있도록 하며, 더 일관된 코딩 구조를 만들어 주는 장점이 있다.
➰ 하지만 클래스명 선택자가 장황해지고, 긴 클래스명 때문에 마크업이 불필요하게 커지는 등의 단점이 있다.

🚨 SASS와 BEM도 고치지 못했던 몇 가지 문제
1. 언어 로직 상에 진정한 캡슐화의 개념이 없다.
2. 이로 인해 개발자들이 유일한 클래스명을 선택하는 것에 의존할 수 밖에 없다.

✔️ CSS-in-JS
➰ CSS도 컴포넌트 영역으로 불러오기 위한 방법

✔️ Styled-Component
➰ CSS-in-JS의 대표적인 방법
➰ 기능적 혹은 상태를 가진 컴포넌트들로부터 UI를 완전히 분리해 사용할 수 있는 아주 단순한 패턴을 제공한다.

📣 CSS 방법론들의 특징과 장단점

---

📣 Styled Components

✔️ React 환경에서 사용 가능한 CSS를 컴포넌트화한 라이브러리
➰ 이 라이브러리를 사용하면 CSS도 쉽게 JS안에 넣어줄 수 있다.
➰ HTML + JS + CSS 까지 묶어서 하나의 JS 파일 안에서 컴포넌트 단위로 개발할 수 있게 된다.

📣 Styled Components 설치하기

✔️ 설치

npm install --save styled-components

✔️ package.json에 코드 추가
➰ 여러 버전의 Styled Components가 설치되어 발생하는 문제를 줄여준다.

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

✔️ 불러오기

import styled from "styled-components"

📣 Styled Components 문법

1️⃣ 컴포넌트 만들기

➰ 따옴표가 아닌 백틱을 사용하는 Templete Literals 문법을 사용한다.

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

➰ 배경색이 파란색, 글씨 색상이 하얀색인 버튼이 생성된다.

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

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

➰ 이미 만들어진 컴포넌트를 재활용해서 새로운 컴포넌트를 만들 수 있다.
➰ 2번의 파란 버튼에 padding, margin 속성이 추가 된 버튼이 생성된다.

3️⃣ Props 활용하기

➰ Styled Component로 만든 컴포넌트도 React 컴포넌트처럼 props로 내려줄 수 있다.
➰ 템플릿 리터럴 문법 '${}' 을 사용해서 JS 코드를 사용할 수 있다.

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

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

➰ <Button> 컴포넌트에 skyblue라는 props가 있는지 확인하고, 있으면 배경색을 skyblue로, 없으면 white로 지정해주는 코드

<Button skyblue>Button1</Button>
// 배경색이 스카이블루인 버튼

<Button>Button2</Button>
// 배경색이 화이트인 버튼

2) Props 값으로 렌더링하기

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

<Button>Button1</Button>
<Button color="orange">Button2</Button>
<Button color="tomato">Button3</Button>

➰ props.color 가 없다면 white를, 있다면 그 값을 가져와서 스타일 속성 값을 리턴해주고 있다.
➰ 꼭 삼항연산자만 사용할 필요는 없다 -> JS 코드라면 무엇이든 사용 가능

4️⃣ 전역 스타일 설정하기

import { createGlobalStyle } from 'styled-components";

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

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

➰ <GlobalStyle> 컴포넌트를 최상위 컴포넌트에 사용해주면 전역에 <GlobalStyle> 컴포넌트의 스타일이 적용된다.

📣 실습

import styled from "styled-components";

      const Button = styled.button`
      padding: 1rem;
      font-size: 2rem;
      background: powderblue;
      border-radius: 1rem;
      transition: 0.5s;
      &:hover{
      // hover 효과
        background: cornflowerblue;
        color: white;
        transition: 0.5s;
      }
      `;


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

---

📣 컴포넌트 UI 개발을 위한 Storybook

✔️ CDD가 트렌드로 자리 잡게 되면서 이를 지원하는 도구인 Component Explorer가 등장했다.
✔️ Storybook : Component Explorer 의 UI 개발 도구 중 하나

📣 Storybook이 무엇인가요?

✔️ UI 개발, 즉 CDD를 하기 위한 도구
➰ 각각의 컴포넌트들을 따로 볼 수 있게 구성해 주어 한 번에 하나의 컴포넌트에서 작업할 수 있다.
➰ 재사용성을 확대하기 위해 컴포넌트를 문서화하고, 자동으로 컴포넌트를 시각화하여 시뮬레이션 할 수 있는 다양한 테스트 상태를 확인할 수 있다.
➰ 버그 사전 방지, 테스트 및 개발 속도 향상의 장점이 있다.

📣 Storybook과 같은 UI 개발 도구를 왜 사용할까요?

✔️ Storybook은 기본적으로 독립적인 개발 환경에서 실행되며, 개발자는 애플리케이션이 다양한 상황에 구애받지 않고 UI 컴포넌트를 집중적으로 개발할 수 있다.
✔️ Storybook 의 주요 기능
➰ UI 컴포넌트들을 카탈로그화 하기
➰ 컴포넌트 변화를 Stories로 저장하기
➰ 핫 모듈 재 로딩과 같은 개발 툴 경험을 제공하기
➰ 리액트를 포함한 다양한 뷰 레이어 지원하기

📣 Storybook 으로 컴포넌트들을 문서화해서 관리하기

➰ 리액트 프로젝트안에 Storybook 설치하기

npx storybook init
// package.json을 보고 사용 중인 프론트엔드 라이브러리에 맞는 Storybook 사용환경을 알아서 만들어주는 명령어

➰ /.storybook 폴더와 /src/stories 폴더가 생성되고 /.storybook 폴더에는 Storybook 관련 설정 파일이, /src/stories 폴더에는 Storybook 예시 파일들이 들어있다.

➰ 터미널에서 Storybook 실행하기

npm run storybook

➰ localhost:6006 으로 접근하여 Storybook을 실행시킨다.
➰ /src/stories 폴더 안에 있던, Storybook에서 만들어놓은 예시 스토리를 확인할 수 있다.

➰ 스토리 작성 -> src 폴더 안에 Title.js 파일을 만들고, 컴포넌트 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 파일을 하나 만든다.

// 앞에서 작성한 컴포넌트를 불러옵니다.
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.bins({}); 는 정해진 문법이라고 생각하고 사용하시면 됩니다.
export const RedTitle = Template.bind({});

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

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

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

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

---

📣 useRef

✔️ DOM 엘리먼트의 주소값을 활용해야 하는 경우 React로 모든 개발 요구 사항을 충족할 수 없다.
➰ focus
➰ text selection
➰ media playback
➰ 애니메이션 적용
➰ DOM 기반 라이브러리 활용

➰ 위와 같은 예외적인 상황에서 useRef로 DOM 노드, 엘리먼트, 리액트 컴포넌트 주소값을 참조할 수 있다.

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

➰ 이 주소값은 컴포넌트가 리렌더링 되더라도 바뀌지 않는다.

🚨 useRef는 리액트의 특징인 선언형 프로그래밍 원칙과 배치되기 때문에 남용해서는 안된다!