(S2W4) TIL 37일차 220323 (React 컴포넌트 디자인 - 방법론)

오늘의 학습목표

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

학습내용

Storybook

Storybook은 컴포넌트의 재사용성을 확대하기 위해 사용하는 UI 개발도구입니다.

 

1. 회사에서 사용하는 UI 라이브러리를 내부 개발자들을 위해 문서화하는 UI 개발도구입니다
2. 컴포넌트를 시각화하여 시뮬레이션할 수 있는 다양한 테스트 상태를 만들어볼 수 있습니다.
3. UI 라이브러리로 활용하기 때문에 애플리케이션과 독립적인 개발 환경에서 실행됩니다.
   • 굳이 애플리케이션을 탐색하지 않아도 Storybook을 통해 전체 UI에 대한 파악을 한눈에 할 수 있습니다. 이러한 장점으로 외부에 공개하기 위한 기본 플랫폼으로도 활용할 수 있습니다.

 

CSS-in-JS

1. CSS가 특정 컴포넌트에 종속되기 때문에 className 이 겹치는 부작용이 없어서 협업, 유지 보수에 용이합니다.
2. 다른 컴포넌트에게 영향을 주지 않기 때문에 생성, 수정, 삭제가 자유롭습니다.
   • 코드를 구성하는 원칙은 "의존성(dependency)이 낮고 응집성이 높게 만드는 것"인데 CSS-in-JS를 활용해서 의존성을 낮출 수 있습니다.
3. CSS-in-JS는 그때그때 필요한 만큼만 style 태그를 생성합니다.
   1. 기본 방식은 전체 페이지에 필요한 CSS를 모두 처음부터 로딩해서 style 태그를 생성했습니다.
4. CSS-in-JS 라이브러리들 종류에는 styled-components, glamorous, aphrodite 등이 있으며 그중 가장 인기 있는 라이브러리가 styled-components 입니다.

Styled-Components

Styled Component는 React 의 컴포넌트 기반 개발 환경에서 스타일링을 위한 CSS의 성능 향상을 위해 탄생하였습니다. Styled Component를 사용하면 기존 CSS 문법으로도 스타일 속성이 추가된 React 컴포넌트를 만들 수 있습니다.

• Automatic critical CSS
  • Styled Component 는 화면에 어떤 컴포넌트가 렌더링 되었는지 추적해서 해당하는 컴포넌트에 대한 스타일을 자동으로 삽입합니다. 따라서 코드를 적절히 분배해 놓으면 사용자가 애플리케이션을 사용할 때 최소한의 코드만으로 화면이 띄워지도록 할 수 있습니다.
• No class name bugs
  • Styled Component 는 스스로 유니크한 className 을 생성합니다. 이는 className 의 중복이나 오타로 인한 버그를 줄여줍니다.
• Easier deletion of CSS
  • 기존에는 더 이상 사용하지 않거나 삭제한 컴포넌트에 해당하는 스타일 속성을 제거하기 위해 CSS 파일 안의 className을 이리저리 찾아야 했습니다. 하지만 Styled Component 는 모든 스타일 속성이 특정 컴포넌트와 연결되어 있기 때문에 만약 컴포넌트를 더 이상 사용하지 않아 삭제할 경우 이에 대한 스타일 속성도 함께 삭제됩니다.
• Simple dynamic styling
  • className을 일일이 수동으로 관리할 필요 없이 React 의 props 나 전역 속성을 기반으로 컴포넌트에 스타일 속성을 부여하기 때문에 간단하고 직관적입니다.
• Painless maintenance
  • 컴포넌트에 스타일을 상속하는 속성을 찾아 다른 CSS 파일들을 검색하지 않아도 되기 때문에 코드의 크기가 커지더라도 유지 보수가 어렵지 않습니다.
• Automatic vendor prefixing
  • 개별 컴포넌트마다 기존의 CSS 를 이용하여 스타일 속성을 정의하면 될 뿐입니다. 이외의 것들은 Styled Component 가 알아서 처리해 줍니다.

useRef

1. useRef는 DOM 엘리먼트의 특정 메서드를 활용해야 할 때 자주 사용됩니다. React에서 DOM 엘리먼트에 직접 접근하여 메서드를 이용할 방법이 제한적이기 때문입니다.
2. useRef의 초기값(useRef의 첫 번째 인자)에는 어떤 참조 자료형도 할당할 수 있지만, DOM 엘리먼트나 React 엘리먼트의 주소값을 할당하여 사용하는 경우가 더 많습니다.
3. 대부분의 경우 애플리케이션에서 변화하는 값은 useState로 state로 지정하여 이용해야 합니다. useRef의 리턴값은 변화되어도 컴포넌트가 재렌더링이 되지 않기 때문입니다.
4. ref 속성을 활용해서 DOM 엘리먼트, React 엘리먼트의 주소값을 useRef의 리턴값에 전달할 수 있습니다.

오늘의 회고

컴포넌트 UI 개발에 도움을 주는 라이브러리인 Storybook을 이해했고, CSS-in-JS, Styled-Components의 장점을 이해했습니다. useRef는 써보기전엔 이해하기 힘들것 같습니다. 머리가 과부화가 오는 것을 느꼈고, 휴식이 좀 필요할 것 같습니다.