CDD (Component Driven Development)

컴포넌트 주도 개발(CDD)은 컴포넌트 주위에 개발 프로세스를 고정하는 개발 방법론이다.
컴포넌트 수준에서 시작해 페이지나 화면 수준에서 끝나는 것으로 "바닥부터 끝까지", UI를 구축하는 과정을 말한다.
레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 진행할 수 있다.

---

🎨 Styled Components

css 컴포넌트화 시킴으로써 해결해주는 라이브러리가 있다.
React 환경에서 사용 가능한 Styled Components 라이브러리.

css 코드를 다룰 때의 불편함

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

CSS in JS

css도 쉽게 Javascript 안에 넣어줄 수 있으므로, HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있다.

Styled Components 설치 방법

npm install --save styled-components

Styled Components는 package.json에 다음 코드를 추가하도록 권장하고 있습니다.

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

1. Styled Components로 컴포넌트를 만드는 방법

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

예)

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

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

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

예)

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

3. Props 활용하기

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

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

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

<Button skyblue>Button1</Button>
<Button>Button2</Button>

2) Props 값으로 렌더링하기

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

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

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

<Button2>Button1</Button2>
<Button2 color="pink">Button2</Button2>
<Button2 color="turquoise">Button3</Button2>

4. 전역 스타일 설정하기

import { createGlobalStyle } from "styled-components";

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

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

---

📢 Storybook

각각의 컴포넌트들을 따로 볼 수 있게 구성해 주어 한 번에 하나의 컴포넌트에서 작업할 수 있습니다. 복잡한 개발 스택을 시작하거나, 특정 데이터를 데이터베이스로 강제 이동하거나, 애플리케이션을 탐색할 필요 없이 전체 UI를 한눈에 보고 개발할 수 있습니다.

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

Storybook에서 지원하는 주요 기능

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

Storybook을 설치방법

npx storybook init

Storybook 실행하기

npm run storybook

---

🔗 useRef

useRef 로 DOM 노드, 엘리먼트, 그리고 React 컴포넌트 주소값을 참조할 수 있다.

const 주소값을_담는_그릇 = useRef(참조자료형)
return (
    <div>
      <input ref={주소값을_담는_그릇} type="text" />
    </div>);

예1) focus

import React, { useRef } from "react";

const Focus = () => {
  const f1fo = useRef(null);
  const s2fo = useRef(null);
  const t3fo = useRef(null);

  const handleInput = (event) => {
    console.log(event.key, event);
    if (event.key === "Enter") {
      if (event.target === f1fo.current) {
        s2fo.current.focus();
        event.target.value = "";
      } else if (event.target === s2fo.current) {
        t3fo.current.focus();
        event.target.value = "";
      } else if (event.target === t3fo.current) {
        f1fo.current.focus();
        event.target.value = "";
      } else {
        return;
      }
    }
  };

  return (
    <div>
      <h1>타자연습</h1>
      <h3>각 단어를 바르게 입력하고 엔터를 누르세요.</h3>
      <div>
        <label>hello </label>
        <input ref={f1fo} onKeyUp={handleInput} />
      </div>
      <div>
        <label>world </label>
        <input ref={s2fo} onKeyUp={handleInput} />
      </div>
      <div>
        <label>codestates </label>
        <input ref={t3fo} onKeyUp={handleInput} />
      </div>
    </div>
  );
};

export default Focus;

예2) media playback

import { useRef } from "react";
function App() {
  const videoRef = useRef(null);

  const playVideo = () => {
    videoRef.current.play();
    console.log(videoRef.current);
  };

  const pauseVideo = () => {
    videoRef.current.pause();
    videoRef.current.remove();
  };

  return (
    <div className="App">
      <div>
        <button onClick={playVideo}>Play</button>
        <button onClick={pauseVideo}>Pause</button>
      </div>
      <video ref={videoRef} width="320" height="240" controls>
        <source
          type="video/mp4"
          src="https://player.vimeo.com/external/544643152.sd.mp4?s=7dbf132a4774254dde51f4f9baabbd92f6941282&profile_id=165"
        />
      </video>
    </div>
  );
}

export default App();

---

오늘 학습을 마치고 나서, 📖

styled components와 useRef는 직접 vscode로 코드를 쳐보면서 실습해 보았지만, Storybook은 실행이 안 되는 현상이 계속 지속되어 추후에 해볼 예정이다.
컴포넌트의 다양성과 효율성을 다시 배울 수 있었고, css 파일을 통하지 않아도 구현할 수 있는 방법을 배우게 되어 새로웠다. 컴포넌트는 항상 어렵다.. 더 집중하여 자료를 더 찾아보면서 이해하도록 노력해야겠다.