Unit3 - [React] Custom Component

🔥 Component Driven Development

1. CDD

: 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 방법
( 재사용 할 수 있는 UI 컴포넌트의 필요성으로 인해 만들어졌다. )

+ CDD 방법을 활용하여 UI를 구축하는 사이트 : BBC , UN

2. CSS in JS

구조화된 CSS가 필요하게 된 이유

• 프로젝트의 규모와 복잡도, 팀원 수 증가
• 모바일이나 태블릿 등의 다양한 디바이스 등장

CSS 전처리기 (CSS Preprocessor) : CSS가 구조적으로 작성될 수 있게 도움을 주는 도구
( SASS가 CSS 전처리기 중 가장 유명 )

• SASS(Syntactically Awesome Style Sheets) - Preprocessor
  : CSS를 확장해주는 스크립팅 언어
  ( SCSS 코드를 읽어서 전처리한 다음 컴파일해서 전역 CSS번들 파일을 만들어주는 전처리기 역할 )

CSS 방법론의 공통 지향점

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

CSS 방법론 - BEM
: Block, Element, Modifier로 구분하여 클래스명을 작성하는 방법

Styled-Component (CSS-in-JS)
: JavaScript에서 CSS를 작성하는 방식 -> CSS를 컴포넌트의 영역으로 불러들인 CSS 작성 방법

---

🔥 CDD 개발 도구

1. Styled Components

: JavaScript에서 CSS를 작성하는 방식 -> CSS를 컴포넌트의 영역으로 불러들인 CSS 작성 방법

CSS in JS 라이브러리를 사용하면 CSS를 JavaScript로 넣어줘서,
HTML + JS + CSS 를 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있다.

그 중 가장 인기 있는 라이브러리 => Styled Components

Styled Components 설치하기

- 터미널에 아래 명령어를 입력하여 Styled Components 라이브러리 설치

npm install --save styled-components  # npm

yarn add styled-components  # yarn

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

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

- Styled Components를 사용할 파일에서 아래 코드를 작성해 불러온다.

import styled from "styled-components"

Styled Components 문법

1. 컴포넌트 만들기

Styled Components는 ES6의 Templete Literals 문법을 사용한다. => 따옴표가 아닌 백틱( ` ) 사용

import styled from "styled-components";

// Styled Components로 컴포넌트를 만들고
const SkyBlueButton = styled.button`
  background-color: skyblue;
`;

export default function App() {
  // React 컴포넌트를 사용하듯이 사용
  return <SkyBlueButton>SkyBlue Button</SkyBlueButton>;
}

위 코드 출력 화면

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

import styled from "styled-components";

const SkyBlueButton = styled.button`
  background-color: Skyblue;
`;

// 만들어진 컴포넌트를 재활용해 컴포넌트를 만들 수 있다.
const BigSkyBlueButton = styled(SkyBlueButton)`
  padding: 10px;
  margin-top: 10px;
`;

// 재활용한 컴포넌트를 재활용할 수도 있다.
const BigRedButton = styled(BigSkyBlueButton)`
  background-color: blue;
  color: white;
`;

export default function App() {
  return (
    <>
      <SkyBlueButton>Skyblue Button</SkyBlueButton>
      <br />
      <BigSkyBlueButton>Big Skyblue Button</BigSkyBlueButton>
      <br />
      <BigRedButton>Big blue Button</BigRedButton>
    </>
  );
}

위 코드 출력 화면

3. Props 활용하기

- Styled Component로 만든 컴포넌트도 React 컴포넌트처럼 props를 내려줄 수 있고, 내려준 props 값에 따라서 컴포넌트를 렌더링하는 것도 가능하다.
- Styled Components는 템플릿 리터럴 문법( ${ } )을 사용하여 JavaScript 코드를 사용할 수 있다.
- props를 받아오려면 props를 인자로 받는 함수를 만들어 사용하면 된다.

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

import styled from "styled-components";

// 받아온 prop에 따라 조건부 렌더링이 가능하다. (삼항연산자 사용)
const Button1 = styled.button`
  background: ${(props) => (props.skyblue ? "skyblue" : "white")};
`;

export default function App() {
  return (
    <>
      <Button1>Button1</Button1>
      <Button1 skyblue>Button2</Button1>
      </>
  );
}

위 코드 출력 화면

2) Props 값으로 렌더링하기
props의 값을 통째로 활용해서 컴포넌트 렌더링에 활용할 수 있다.

import styled from "styled-components";

// 받아온 prop 값을 그대로 이용해 렌더링할 수 있다.
const Button1 = styled.button`
  background: ${(props) => (props.color ? props.color : "white")};
`;

// 다음과 같은 형식으로도 활용할 수 있다.
const Button2 = styled.button`
  background: ${(props) => props.color || "white"};
`;

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

4. 전역 스타일 설정하기
- 전역 스타일을 설정하기 위해 Styled Components에서 createGlobalStyle 함수를 불러온다.

import { createGlobalStyle } from "styled-components";

- 이 함수를 사용해 CSS 파일에서 작성하듯 설정해주고 싶은 스타일을 작성한다.

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

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

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

2. Storybook

: UI 개발 도구, Component Driven Development를 하기 위한 도구 (컴포넌트 시각화 & 문서화)

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

Storybook 주요 기능

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

Storybook 기본 사용 방법

- Storybook 설치

npx storybook init

Storybook 설치가 완료되면, /.storybook 폴더와 /src/stories 폴더가 생성된다.
/.storybook 폴더 => Storybook 관련 설정 파일, /src/stories 폴더 => Storybook 예시 파일

- Storybook 실행

npm run storybook

localhost:6006으로 접근하여 Storybook을 실행한다.

Storybook을 사용하면 애플리케이션을 실행하고 이벤트를 통해 상태를 변경하는 과정을 거치지 않아도 상태 변화에 따른 컴포넌트의 변화를 확인할 수 있다.

- 간단한 스토리 작성
src 폴더 > Title.js 파일 생성, 아래와 같이 React 컴포넌트를 하나 만들어 export 해준다.

// Title.js

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 파일 생성
.storybook 안에 있는 Storybook 설정 파일에 의해 컴포넌트 파일과 똑같은 파일 이름에 .stories를 붙여 파일을 만들면 알아서 스토리로 인식한다.

// 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",
};


// 전달인자를 직접 받는 스토리 작성
export const StorybookTitle = (args) => {
  return <Title {...args} />;
};

Storybook 공식문서

---

🔥 useRef

: useRef를 활용하면 DOM 노드, 엘리먼트, React 컴포넌트 주소값을 참조할 수 있다.

( React : DOM 직접 조작하는 것 지양 -> document.querySelector 등 사용 x )

DOM 엘리먼트의 주소값을 활용해야 하는 경우

• focus
• text selection
• media playback
• 애니메이션 적용
• d3, greensock 등 DOM 기반 라이브러리 활용

=> 위와 같은 DOM 객체 주소 필요한 상황이 계속 발생해 useRef 메서드가 생성되었다.

const 주소값을_담는_그릇 = useRef(참조자료형)
// 주소값을_담는_그릇 변수에 어떤 주소값이든 담을 수 있다.
return (
  <div>
  	<input ref={주소값을_담는_그릇} type="text" />
  		{/* React에서 사용 가능한 ref라는 속성에 주소값을_담는_그릇을 값으로 할당하면*/}
        {/* 주소값을_담는_그릇 변수에는 input DOM 엘리먼트의 주소가 담긴다. */}
        {/* 이후 다른 컴포넌트에서 input DOM 엘리먼트를 활용할 수 있다. */}
  	</div>;

=> 주소값은 컴포넌트가 re-render 되더라도 바뀌지 않는다.

useRef를 남용하는 것은 React의 선언형 프로그래밍 원칙과 배치되기 때문에 조심해서 사용해야 한다.

예제 1 : focus
https://codesandbox.io/s/patient-worker-3kzhd?from-embed

예제 2 : media playback
https://codesandbox.io/s/priceless-sanderson-kx77s?from-embed

---

+ Event.stopPropagation()
: 현재 이벤트가 캡처링/버블링 단계에서 더 이상 전파되지 않도록 방지한다.