TIL: 2022-10-27

⚙️ 오늘 배운 주제

Component Driven Development

 

🐹 오늘의 기분

월요일에 잠을 제대로 못 잤는데 그 여파가 이제서야 제대로 와버렸다. 학습 내내 너무너무 피곤했다.게다가 요즘 소화도 잘 안 돼서 제대로 먹지도 못 함 ㅠㅠ 잠이 이렇게 중요하다는 걸 또 깨닫습니다.... 난 진짜 야행성은 아닌가보다.

오늘은 CDD를 배웠다. 하루종일 혼자 학습하는 날이라 열품타 켜놓고 공부했다. 학습 자체는 캘린더 일정보다 일찍 끝났지만, 처음보는게 많이 등장해서 쉽지는 않았다.

 

🗝 키워드

Component Driven Devlopment, SASS, BEM, CSS-in-JS, Styled Components, Storybook, useRef

 

🗣 스스로에게 설명

Component Driven Development

재사용할 수 있는 UI 컴포넌트를 미리 디자인하고 개발하기
부품 단위로 UI 컴포넌트를 만들어나갈 수 있음. (상향식 개발)
컴포넌트 생성 -> 컴포넌트 결합 -> 페이지 조립

CSS 구조화의 역사

CSS 작업을 효율적으로 하기 위해 구조화된 CSS의 필요성이 대두됨.
CSS 전처리기를 쓴 후 각 전처리기에 맞는 컴파일러를 이용해 CSS를 해석한다.
CSS의 구조화
CSS 파일을 몇 개의 작은 파일로 분리할 수 있게 됨.

SASS

Syntactically Awesome Style Sheets
CSS를 확장해주는 스크립팅 언어, 프로그래밍 방법론 도입

변수/함수/상속 개념을 이용해 재사용이 가능해졌다.
하지만 컴파일된 CSS 파일의 용량이 어마어마하게 커지는 문제가 발생했다.

 

이후 수많은 스크립팅 언어가 등장했지만 지향점은 공통적이었다

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

BEM

Block, Element, Modifier로 구분하여 클래스명을 작성하는 방법

.header__navigation--navi--text 이런 식으로 작성한다.

나만의 아고라 스테이츠 만들기 프로젝트에서 썼던 클래스 네이밍 방법임.

하지만 이름이 지나치게 길어진다는 단점이 있다.

진정한 캡슐화의 개념이 등장하지는 않았음.

CSS-in-JS

Styled-Component
CSS를 컴포넌트 안으로 캡슐화. 네이밍이나 최적화를 신경쓸 필요가 없음.

CDD 개발하기

Styled Components (리액트 라이브러리)

설치하기

리액트 프로젝트 디렉토리에서 npm으로 설치하면 된다.

npm install --save styled-components

이후 파일을 작성할 때 import로 불러오면 styled-components를 사용할 수 있다.

import styled from "styled-components";

컴포넌트 만들기

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

템플릿 리터럴 문법을 사용한다.

재활용하기

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

Props 활용하기

1) 조건부 렌더링

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

 

<Button>에 skyblue 속성이 있으면 skyblue로 배경색 설정, 없으면 white

 

2) props 값으로 렌더링

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

${} 안에는 꼭 삼항연산자가 아니더라도 자바스크립트 코드라면 무엇이든 사용할 수 있다.

전역 스타일 설정하기

특정 컴포넌트의 스타일이 아닌 전역 스타일을 설정할 때에는 createGlobalStyle을 활용한다.

실습

import styled from "styled-components";
import {createGlobalStyle} from "styled-components";
import "./styles.css";

const GlobalStyle = createGlobalStyle`
  margin: 0.5rem;
`

const Button = styled.button`
  padding: 1rem;
  font-size: 2rem;
  background: powderblue;
  border-radius: 1rem;
  transition: 0.5s;

  &:hover {
  background: cornflowerblue;
  color: white;
  transition: 0.5s;
  }
`

export default function App() {
  return (
    <>
      <GlobalStyle />
      <Button>Styled-component</Button>
      <button id="practice">original</button>
    </>
  )
}

결과물

리턴문에서 계속 오류가 났었는데 전체 컴포넌트를 상위 태그로 감싸주지 않아서 발생한 것이었다.

Storybook

컴포넌트 탐색기
전체 UI를 한눈에 보고 개발할 수 있다.

컴포넌트를 문서화해서 보여준다.

다양한 테스트 상태를 시뮬레이션할 수 있어 버그를 사전에 방지할 수 있다.

서버나 앱 전체를 실행하지 않고 컴포넌트를 만들 수 있다 = 독립적이다

설치하기

리액트 프로젝트 디렉토리에 명령어로 Storybook을 설치한다.

npx storybook init

npm으로 실행하여 설치하면서 들어온 예제 컴포넌트들을 볼 수가 있다.

npm run storybook

컴포넌트들의 색이나 크기 등을 바꿔볼 수가 있다. 

 

js 파일에는 JSX 문법으로 컴포넌트를 렌더링하는 코드를 작성하고, 

stories.js 파일에 해당 컴포넌트의 테스트 상태를 저장한다.

 

아래 공식 문서의 '설정하기' 부분까지 읽어보면 Storybook의 윤곽을 잡을 수 있다.

Storybook Tutorials

 

useRef

DOM을 직접 건드려야할 때 쓰는 Hook 함수
useRef로 DOM 노드, 엘리먼트 그리고 React 컴포넌트 주소값을 참조할 수 있음
남용하는 것은 좋지 않다.

DOM element의 주소값을 활용해야 하는 경우

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

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

re-render되어도 바뀌지 않는 주소값만의 특성을 활용할 수 있음.

 

useRef는 당최 무슨 소린지 모르겠어서 이것저것 조금 찾아봤다.

개인적으로 useRef 이해하는데 가장 도움되는 영상이었다. 

 

아래 블로그 글의 예제도 연습해보자. 일단 따라해보고 혼자 다시 만들어보면 더 좋을 듯. 

10. useRef 로 특정 DOM 선택하기 · GitBook

 

🔍 공부가 더 필요한 부분

Storybook 공식 문서 실습 따라해보기

useRef의 필요성 이해하기