Unit 3] [React] Custom Component(CDD, 개발도구)

SEB _ FE _ 45

Section 3. Unit 3. [React] Custom Component

---

React로 프론트엔드 구축 시 보다 구조적으로 코드를 작성하는 방법을 주제로 CDD(Component Driven Development)와 CDD를 도와주는 개발도구, React Hook인 useRef에 대해 공부하였다.

CDD는 컴포넌트 기반의 개발 방법을 의미한다. 즉, 부품단위로 UI 컴포넌트를 만든 후, 부품끼리 이어붙여 완성품을 만드는 방법이다.

React 라이브러리와 Styled Component 라이브러리를 이용하여, HTML, CSS, JavaScript를 모두 묶어서 개발할 수 있는Custom Component가 가능해졌다.

---

CSS 구조화 노력과 각 단계별 특징 및 장/단점

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

---

CDD 개발 도구 ( Styled Component, Storybook)

1. Styled Component

컴포넌트 만들기!

//styled-components 라이브러리를 설치한 후, import 해오기
import styled from "styled-components";

//Styled Components 로 컴포넌트 만들기
const BlueButton = styled.button`
// const [컴포넌트 이름] = styled.[태그명] `(요소의 속성:값)`
  background-color: blue;
  color: white;
`;

export default function App() {	
//App() 호출하여 BlueButton 태그 반환
	return <BlueButton>Blue Button</BlueButton>
}

---

컴포넌트 재사용하기!

// ... 위 예제 참조//

//위 예제에서 만든 BlueButton 컴포넌트 재사용
const BigBlueButton = styled(BlueButton)`
  padding: 10px;
  margine: 10px;
`

//재활용한 BigBlueButton 컴포넌트도 재사용 가능
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>
    </>
  );
}

---

Props 활용하기

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

2) Props 값으로 렌더링하기

//전역스타일 설정하기
//GlobalStyle.js
import { createGlobalStyle } from "styled-components";

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

export default GlobalStyle;

//App.js
//Props로 조건부 렌더링하기
import styled from "styled-components";
import GlobalStyle from "./GlobalStyle";
//받아온 prop에 따라 조건부 렌더링이 가능합니다.

const Button1 = styled.button`
  background: ${(props) => (props.skyblue ? "skyblue" : "white")};
`;
  
  
//Props 값으로 렌더링하기
//받아온 Prop 값 그대로 이용
const Button2 = styled.button`
  background: ${(props) => (props.color ? props.color : "white")};
`;

//이렇게도 쓸 수 있어!
const Button3 = styled.button`
  background: ${(props) => props.color || "white"};
`;

export default function App() {
  return (
    <>
      <GlobalStyle />
      <Button1>Button1</Button1>
      <Button1 skyblue>Button1</Button1>
      <br />
      <Button2>Button1</Button1>
      <Button1 color="orange">Button1</Button1>
      <Button1 color="tomato">Button1</Button1>
      <br />
      <Button3>Button2</Button2>
      <Button2 color="pink">Button2</Button2>
      <Button2 color="turquoise">Button2</Button2>
    </>
  );
}

---

Storybook은 UI 개발 도구로 재사용성을 확대하기 위해 컴포넌트를 문서화하고, 자동으로 시각화하여 시뮬레이션 할 수 있는 등의 기능이 있다.

https://storybook.js.org/

Storybook: Frontend workshop for UI development

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

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

사용 방법은 공식문서를 사용하여 알아보도록 하자!

https://storybook.js.org/docs/react/get-started/install

Install Storybook

---

정리 및 회고

CDD와 관련해서는 우선 개발도구와 관련된 설명이라, 간단하게 쓰려고 했는데 글이 길어졌다.

useRef의 경우에는 React Hook으로 여러개의 Hook이 있어 공부한 후에 같이 정리하는 것이 좋겠다.

어제 피그마로 실습해본 UI를 이제 코드로 구현해볼 수 있다는 점이 기대가 되지만,

할 수 있을까 하는 두려움도 앞선다.

모르면 알때까지 쳐보고, 재밌게 만들어보자!

아자!