(SEB_FE) Section3 Unit3 CDD 개발 도구

PYM·2023년 4월 18일
CSSCSS in JSstorybookstyled components
0

(SEB_FE) SECTION3

목록 보기
9/22
post-thumbnail

Styled Components의 기본 사용법을 익힌다.
HTML과 CSS로 작성된 요소를 Styled Components 컴포넌트로 바꿀 수 있다.
UI 개발 도구의 필요성을 이해한다.
Storybook의 기본 사용법을 익힌다.

🍊Styled Components

🍒 CSS in JS의 등장

기존의 HTML, CSS, JS 파일로 쪼개서 개발하던 방법에서, React 등의 라이브러리의 등장으로 컴포넌트 단위 개발이 주류가 되었지만, CSS는 그렇지 못했다는 점에서 출발한 개념이다.

CSS in JS 라이브러리를 사용하면 CSS도 쉽게 Javascript 안에 넣어줄 수 있으므로, HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있게 된다.

Styled Components는, 이런 CSS in JS 중, 가장 인기 많은 대표격 CSS-in-JS로,
기능적(Functional) 혹은 상태를 가진 컴포넌트들로부터
UI를 완전히 분리해 사용할 수 있는 아주 단순한 패턴을 제공한다.

  • CSS 코드를 다룰 때 다음과 같은 불편함을 느껴본 적 있을 것이다.

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

이런 불편함을 CSS를 컴포넌트화 시킴으로써 해결해 주는 라이브러리가 바로
React 환경에서 사용 가능한 Styled Components!!!

🍒 Styled Components 사용을 위한 준비

  1. 우선 아래 명령어로 설치해 주자. (npm의 경우)

npm install --save styled-components

  1. Styled Components는 package.json에 다음 코드를 추가하도록 권장하고 있다. 아래의 코드를 추가하면 여러 버전의 Styled Components가 설치되어 발생하는 문제를 줄여준다고 한다!
{
  "resolutions": {
    "styled-components": "^5"
  }
}
  1. 그 다음 Styled Components를 사용할 파일로 불러와주면(import하면)
    사용 준비는 완료!

import styled from "styled-components"

🍎Styled Components 문법

🍒 1. 컴포넌트 만들기

import styled from "styled-components";

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

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

컴포넌트를 선언한 후 styled.태그종류를 할당하고, 백 틱 안에 기존에 CSS를 작성하던 문법과 똑같이 스타일 속성을 작성해 주면 된다.

이렇게 만든 컴포넌트를 React 컴포넌트를 사용하듯 리턴문 안에 작성해 주면 스타일이 적용된 컴포넌트가 렌더 되는 것을 확인할 수 있다.

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

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

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

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

컴포넌트를 선언하고 styled()에 재활용할 컴포넌트를 전달해 준 다음, 추가하고 싶은 스타일 속성을 작성해 주면 된다.

🍒 3. Props 활용하기

Styled Component로 만든 컴포넌트도 React 컴포넌트처럼 props를 내려줄 수 있으며, 내려준 props 값에 따라서 컴포넌트를 렌더링 하는 것도 가능하다.

Styled Components는 템플릿 리터럴 문법( ${ } )을 사용하여 JavaScript 코드를 사용할 수 있다. props를 받아오려면 props를 인자로 받는 함수를 만들어 사용하면 된다.

3-1. Props로 조건부 렌더링하기

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

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

➡ 삼항 연산자를 활용해 <Button> 컴포넌트에 skyblue라는 props가 있는지 확인하고, 있으면 배경색으로 skyblue를, 없을 경우 white를 지정해 주는 코드.

3-2. Props 값으로 렌더링하기

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

//받아온 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 (
    <>
      <GlobalStyle />
      <Button1>Button1</Button1>
      <Button1 color="orange">Button1</Button1>
      <Button1 color="tomato">Button1</Button1>
    </>
  );
}

➡ props.color가 없다면 white를, props.color가 있다면 props.color의 값을 그대로 가져와서 스타일 속성 값으로 리턴.
그 결과 color라는 이름으로 받은 props의 값으로 배경색이 지정된다.

🍒 4. 전역 스타일 설정하기

그렇다면, 전역에 스타일을 설정하고 싶을 땐 어떻게 하면 좋을까?

  1. Styled Components에서 createGlobalStyle 함수를 호출한다. 
 import { createGlobalStyle } from "styled-components";
  1. 이 함수를 사용해 CSS 파일에서 작성하듯 설정해 주고 싶은 스타일을 작성한다.
const GlobalStyle = createGlobalStyle`
	button {
		padding : 5px;
    margin : 2px;
    border-radius : 5px;
	}
`
  1. 이렇게 만들어진 <GlobalStyle> 컴포넌트를 최상위 컴포넌트에서 사용해 주면 전역에 <GlobalStyle> 컴포넌트의 스타일이 적용된다. 
function App() {
	return (
		<>
			<GlobalStyle />
			<Button>전역 스타일 적용하기</Button>
		</>
	);
}

🍎Styled Components 관련 익스텐션 소개

Styled Components를 사용할 때, CSS 코드를 템플릿 리터럴로 작성하게 된다.
➡ 즉, CSS 코드를 문자열로 작성하는 것이기 때문에,
VSCode에서 CSS 파일을 작성할 때 처럼 자동 완성 기능을 사용할 수 없어진다🥲

이때 도움이 되는 VSCode 익스텐션이 바로
VSCode-Styled-Components라는 익스텐션!

  • (VSCode 좌측의 Extensions 버튼을 클릭한 후, Vscode-Styled-Components를 검색했을 때 나오는 첫 번째 익스텐션을 설치하면 OK!)

🍊Storybook

Component Driven Development 가 트렌드로 자리 잡게 되면서 이를 지원하는 도구 중 하나인 Component Explorer (컴포넌트 탐색기)가 등장하게 된다.

Component Explorer에는 UI 개발 도구가 다양하게 있는데 그중 하나가 Storybook

🍒 What is the Storybook?

UI 개발 즉, Component Driven Development를 하기 위한 도구로,
각각의 컴포넌트를 따로 볼 수 있게 하여 한 번에 하나의 컴포넌트에서 작업할 수 있다.

  • 복잡한 개발 스택을 시작하거나,
    특정 데이터를 데이터베이스로 강제 이동하거나,
    애플리케이션을 탐색할 필요 없이 전체 UI를 한눈에 보고 개발할 수 있다.

  • 재사용성을 확대하기 위해 컴포넌트를 문서화하고, 자동으로 컴포넌트를 시각화하여 시뮬레이션할 수 있는 다양한 테스트 상태를 확인할 수 있다.

    • 이를 통해 버그를 사전에 방지할 수 있도록 도와준다.
    • 테스트 및 개발 속도를 향상하는 장점이 있으며, 애플리케이션 또한 의존성을 걱정하지 않고 빌드할 수 있도록 해 준다.

이외에도 제공하는 주요 기능은 아래와 같다.

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

🍒 Storybook과 같은 UI 개발 도구를 왜 사용해야 할까?

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

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

  1. 우선 아래 명령어를 통해 리액트 프로젝트를 만들어 준다.
    npx create-react-app storybook-practice

  2. 폴더가 생성되면, 폴더 안에서 다음 명령어를 입력하여 Storybook을 설치한다.
    npx storybook@latest init
    (이 명령어는 package.json을 보고 사용 중인 프론트엔드 라이브러리에 맞는 Storybook 사용 환경을 알아서 만들어주기 때문에, 꼭 React가 아니더라도 다양한 프론트엔드 라이브러리에서 사용할 수 있다.)

  • Storybook 설치가 완료되면, /.storybook 폴더와 /src/stories 폴더가 생성된 것을 확인할 수 있다.

    • /.storybook 폴더에는 Storybook 관련 설정 파일이, /src/stories 폴더에는 Storybook 예시 파일들이 들어있다.
  1. 이제 터미널 창에 다음 명령어를 입력하여 Storybook을 실행해 보자.
    npm run storybook

  • 명령어를 입력하면 React가 localhost:3000으로 접근하듯이, localhost:6006으로 접근하여 Storybook을 실행시킨다.

  • Storybook을 실행하면 /src/stories 폴더 안에 있던, Storybook에서 만들어놓은 예시 스토리를 확인할 수 있다.

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

아래부터 간단한 스토리북 생성하는 예시!

  1. src 폴더 안에 Title.js 파일을 하나 만들고, 다음과 같은 간단한 React 컴포넌트를 하나 만들어 export한다

  1. 같은 위치인 src 폴더 안에 Title.stories.js 파일을 하나 만들어 작성한다.
    (/.storybook 안에 있는 Storybook 설정 파일에 의해서 컴포넌트 파일과 똑같은 파일 이름에 .stories를 붙여 파일을 만들면 알아서 스토리로 인식 한다!)

Storybook은 핫 모듈 리로딩을 지원하기 때문에 따로 새로고침을 하지 않아도 변경 사항을 바로 확인할 수 있다! 따라서 npm run storybook으로 실행한 창 확인 해 보면 아래와 같이 왼쪽 메뉴바에 Title 이 생기고, 들어가 보면 작성한 스토리들이 생성되어 있는 걸 확인할 수 있다.

storybook Title 이라는 이름의 스토리의 경우 전달인자를 직접 받는 스토리이기 때문에, Set string 부분에 직접 속성을 입력해 주면 아래와 같이 그 값에 맞춰 스토리가 변경되는 걸 볼 수 있다.

또 다른 예시

  1. src 폴더 안에 Button.js 라는 파일을 생성하고 아래 코드를 적어준다.

  2. 같은 src 폴더 안에 Button.stories.js 파일을 생성하고 아래 코드를 작성해 준다.

  3. 핫 모듈 리로딩으로 자동 새로고침 된 storybook을 확인해 보면,

    이렇게 새로운 스토리가 생성되어 있고, 들어가 보면

    이번엔 이렇게 control 들이 생성 되어 있음을 확인할 수 있다.
    아래와 같이 control 을 사용해서 속성을 적용해주어도 스토리가 그에 따라 변함을 볼 수 있다.

추가적인 학습을 위해서... Storybook 공식 문서

profile
PYM
목표는 "함께 일하고 싶은, 함께 일해서 좋은" Front-end 개발자
이전 포스트

(SEB_FE) Section3 Unit3 Component Driven Development

다음 포스트

(SEB_FE) Section3 Unit3 useRef

0개의 댓글