TIL 46일차 - [React] Custom Component

Yoon Kyung Park·2023년 6월 15일

TIL

목록 보기

46/75

들어가기에 앞서 check 해보기 (section2 - unit4,6,9 참고)

☑️ JSX 문법의 개념에 대해 이해하고 활용할 수 있다. 👉 TIL 27일차 참고
☑️ Component의 개념에 대해 이해하고 작성할 수 있다. 👉 TIL 27일차 참고
☑️ State & Props의 개념과 차이에 대해 이해하고 상황에 맞게 적용할 수 있다. 👉 TIL 29일차 참고
☑️ React Effect Hook에 대해 이해하고 활용할 수 있다. 👉 TIL 34일차 참고
☑️ Lifting State up의 개념을 이해하고 있다. 👉 TIL 35일차 참고

React에서 보다 더 구조적으로 코드를 작성하는 방법이 등장하게 된 배경인
Component Driven Development(CDD)와 CSS-in-JS에 대해서 학습한다.

Component Driven Development(CDD)의 필요성과 이점에 대해서 이해한다.

o
CDD는 컴포넌트 기반의 개발을 의미하며,
재사용할 수 있는 UI 컴포넌트 단위로 만들어 페이지를 조립하여
개발하기 위해 등장하였다.
이는 작은 단위에서 큰 단위로 개발하는 상향식 개발에 가깝다.

이러한 CDD의 장점은 반복되는 코드를 쉽고 빠르게 재사용할 수 있다는 이점이 있다.
구조적으로 CSS를 작성하는 방법의 발전과 이유에 대해서 이해한다.

o
CSS를 작성하는 방법은
CSS -> SASS -> BEM -> CSS Modules
-> Styled-Components 으로 발전해왔다.

이렇게 CSS가 발전된 이유는
프로젝트의 규모와 복잡도가 점점 더 커지고,
협업하는 팀원의 수가 증가하면서
보다 일관된 패턴의 CSS 작성법이 필요해졌고,

기술이 발전함에 따라 다양한 디바이스들이 등장하기 시작했고,
이로 인해 웹사이트들이 다양한 디스플레이를 커버해야 하기 때문에
구조화된 CSS의 필요성과 방법론이 대두되었고,
이로 인해 CSS는 다양한 방식으로 발전해왔다.
CSS 방법론들의 특징과 장단점을 이해한다.

o

출처: codestates

React로 Component Driven Development를 할 수 있는 대표적인 도구인 Styled Component의 사용법과, 컴포넌트들을 문서화하고 관리할 수 있는 도구인 Storybook의 사용법을 학습한다.
이 두 도구의 사용법만 잘 익혀도 보다 더 구조적이고 재사용성 높은 React 프론트엔드 개발을 할 수 있다.

Styled Components의 기본 사용법을 익힌다.

o
Styled Components는 리액트로 컴포넌트 기반의 개발(CDD)을 할 수 있는 대표적인 도구다.
CSS를 컴포넌트화 시켜서 작성하게 해주는 라이브러리다.
HTML과 CSS로 작성된 요소를 Styled Components 컴포넌트로 바꿀 수 있다.

o (아래 실습에서 함)
UI 개발 도구의 필요성을 이해한다.

o
Storybook은 독립적인 개발 환경에서 실행되어 애플리케이션의 다양한 상황에
구애받지 않고 UI 컴포넌트를 집중적으로 개발할 수 있다.
Storybook의 기본 사용법을 익힌다.
o
Storybook은 컴포넌트 기반의 개발(CDD)를 지원하는 UI 개발 도구 중 하나인
Component Explorer(컴포넌트 탐색기)의 하나다.
즉, 컴포넌트 기반의 개발을 하기 위한 도구다.

각각의 컴포넌트들을 따로 볼 수 있게 구성해 주어 한 번에 하나의 컴포넌트에서 작업할 수 있다.

Storybook은 재사용성을 확대하기 위해 컴포넌트들을 '문서화'하고,
자동으로 컴포넌트들을 '시각화'하여
시뮬레이션할 수 있는 다양한 테스트 상태를 '확인'할 수 있다.
이를 통해 사전에 버그를 방지할 수 있고,
테스트 & 개발 속도를 향상시킬 수 있다는 장점이 있다.

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

React 애플리케이션을 만들 때 DOM을 직접 조작하는 것은 지양해야 한다고 배웠다.
하지만, 개발을 하다 보면 DOM을 직접 건드려야 하는 상황이 발생하기도 한다.
이럴 때 사용할 수 있는 것이 바로 useRef라는 Hook 함수다.
이번 챕터에서는 어떤 상황에서 useRef를 사용해야 하는지,
어떻게 사용해야 하는지 학습한다.

useRef의 이해한다.

o
focus/ text selection/ media playback / 애니메이션 적용/ d3.js, greensock 등 DOM 기반 라이브러리 활용과 같이
DOM 엘리먼트의 주소값을 활용해야 하는 경우,
DOM reference를 잘 활용할 수 있는 Hook 함수인
useRef를 사용한다.

이는 React의 예외적인 상황에서 사용하며,
useRef로 DOM 노드, 엘리먼트, React 컴포넌트 주소값을 참조하여 활용할 수 있다.

출처 : codestates
useRef가 필요한 상황들을 기억한다.

o
focus/ text selection/ media playback / 애니메이션 적용/ d3.js, greensock 등 DOM 기반 라이브러리 활용과 같이
DOM 엘리먼트의 주소값을 활용해야 하는 경우에 사용한다.
useRef의 사용법을 이해한다.

o (위에서 설명함)

Styled Components 실습

Styled Components는 이미 설치되어 있다. import 하기. ✓
전역 스타일도 Styled Components 컴포넌트로 바꿔서 적용해 보기. ✓
#practice:hover 속성은 어떻게 Styled Components 컴포넌트에 적용할 수 있을까? 검색을 통해 알아보고 적용해 보기. ✓