Achievement Goals
컴포넌트 기반 Bottom-up 방식 개발이 무엇인지 이해한다.
컴포넌트 UI 개발에 도움을 주는 라이브러리인 Storybook을 활용할 수 있다.
구조적으로 CSS를 작성하는 방법의 발전과 이유에 대해서 이해한다.
컴포넌트 기반 CSS 작성에 도움을 주는 라이브러리인 Styled-Component를 활용할 수 있다.
DOM Reference를 활용하기 위한 useRef Hook을 활용할 수 있다.

Component Driven Development(CDD)

(레고처럼 조립해 나갈 수 있는) 부품 단위로 UI 컴포넌트를 만들어 나가는 개발

재사용할 수 있는 UI 컴포넌트의 필요성 해결 위한 개발방법
BBC
UN

Storybook

Component Explorer
UI 개발 즉, Component Driven Development를 하기 위한 도구

CSS 전처리기(CSS Preprocessor)

CSS 작업을 효율적으로 하기 위해 구조화된 CSS의 필요성

각 CSS 전처리기에 맞는 Compiler를 사용해야 하고 컴파일을 하게 되면 실제로 우리가 사용하는 CSS 문서로 변환이 됩니다.

이를 통해 CSS 파일들을 잘 구조화할 수 있게 되었고, 최소한 CSS 파일을 몇 개의 작은 파일로 분리할 수 있는 방법생김

SASS

Syntactically Awesome Style Sheets의 약자- CSS를 확장해 주는 스크립팅 언어, 가장 유명
but 단점 많음

CSS 방법론 - BEM, OOCSS, SMACSS

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

CSS-in-JS

Styled-Component(대표적)

React 의 컴포넌트 기반 개발 환경에서 스타일링을 위한 CSS의 성능 향상을 위해 탄생
styled-component

useRef

React로 개발시 HTML 엘리먼트에 직접 접근해서 DOM API를 이용해서 제어해야 할 필요

Dom reference

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

React는 이런 예외적인 상황에서 useRef으로 DOM 노드, 엘리먼트, 그리고 리액트 컴포넌트 주소값을 참조

useRef(매개변수)라는 함수를 호출하면 plain JavaScript object를 return하고, { current: 매개변수 }로 초기값이 설정된다. 이렇게 useRef()를 호출해서 만들어진 object는 그 컴포넌트의 전체 라이프사이클 동안 유지가 됨. current의 값을 변경해도 re-render가 되지 않는다.

useRef() 훅(hook) 함수
ref prop HTML(Dom) 엘리먼트의 레퍼런스를 변수에 저장하기 위해서 사용

focus() :
method tells the browser which element is being acted on, similar to .click() or an actual click.

useRef설명블로그