컴포넌트란?
사전적 정의
- (명)구성 요소, 성분
- (형)구성하는, 구성하고 있는, 성분의
개발에서의 Component
- 더 큰 시스템이나 소프트웨어의 구성 요소로서, 독립적으로 작동하고 특정 기능을 수행하는 작은 모듈 (by ChatGPT)
Web Component
- 재사용 가능한 사용자 지정 요소를 생성하고 해당 기능을 나머지 코드에서 캡슐화하여 웹 앱에서 활용할 수 있도록 하는 다양한 기술 모음
캡슐화 : 복잡한 기능의 코드는 인터페이스로 추상화 하여 감추고 보여지는 부분만 노출하는 것
- 웹 표준이며 별도의 설치/호출 없이 사용 가능
React Component
- 비표준이며 선언적 라이브러리인
React에서 사용 가능한 컴포넌트
웹에서 컴포넌트가 생긴 이유
- 페이지에 담아야 할 요소가 많아짐
- 사용자 요구 사항이 많아짐
- UI/UX를 충족하면서 작은 화면하고도 연결되어야 함
컴포넌트를 다루는 FE라면 UI 용어를 숙지할 것
@oneook - 프론트엔드 개발자라면 반드시 알아두어야 할 32가지의 UI 요소 (번역)
강의 중 한 수강생님의 첨언
컴포넌트가 담당하고 있는 역할이 굉장히 많은데, 짧게 추리자면
- 상태
- 유저와의 인터렉션
- UI와 관련되는 부분
컴포넌트를 정의할 때 이렇게 강하게 결속되어있는 부분을 분리해서 재사용성을 좋게 만드는 방법이에요.
이 중에 상태와 인터렉션을 분리하여 UI 관련된 내용만 담아서 컴포넌트의 재사용성을 늘려준 컴포넌트를 headless component라고 생각하시면 될 것 같습니다.
- 컴포넌트 작명할 때 도메인 이름을 최대한 넣지 말 것
- 도메인 넣지 않고 생김새로 작명
- ex)
WantedFormWrapper=>FromWrapper
컴포넌트 패턴 참고
Headless Component
- 기능만 담긴 컴포넌트를 제공하고 UI/UX 디자인은 셀프
참고 라이브러리
아토믹 패턴
-
구현하면 좋지만 매우 어렵다
아토믹 패턴 참고
리액트 컴포넌트를 잘 설계하는 방법
- Top => Bottom 대신 Bottom => Top + Atomic으로 설계 연습
- Storybook 병행
- UI 라이브러리 코드 많이 보기
- 내가 사용하는 라이브러리 +
example참고
- 내가 사용하는 라이브러리 +
그 외 강의 중 모르는 용어들
- bem 방법론 ?? [CSS 방법론] BEM 방식
- react hooks의 과거 HOC ?? 고차 컴포넌트
- Lerna ??
- 모노레포 ?? 모노레포 - 마이크로 아키텍처를 지향하며
- MFA ?? https://www.youtube.com/watch?v=_SkngG2RR3Q
- Qwik ??
- jotai ?? = recoil
- zustand ?? = redux
프론트엔드 개발자가 되고 싶다