원티드 6월- 컴포넌트에 대한 이해

주제:스토리북과 함께하는 컴포넌트 주도 개발

컴포넌트에 대한 설명: 재사용할 수 있는 코드 블록 

 

우리가 생각하는 컴포넌트의 종류:  (3가지를 구별해서 생각하는 것이 중요하다)

• Component
• Web Component
  • 빌드 필요X
  • 표준화됨
  • 바로 사용할 수 있다 (커스텀도 가능하다)
• React Component

---

Web Component:

정의: 웹 컴포넌트는 그 기능을 나머지 코드로부터 캡슐화하여 재사용 가능한 커스텀 엘리먼트를 생성하고 웹 앱에서 활용할 수 있도록 해주는 다양한 기술들의 모음입니다. 

 

웹 컴포넌트 VS React

react가 표준이 아니고 웹 컴포넌트가 표준인 이유?: 웹 컴포넌트는 별도의 설치 없이 사용할 수 있다. (근본적인 차이점) 

웹 컴포넌트도 다른 사람이 만들 것을 사용할 수 있다. 

결국 각 컴포넌트는 다른 결을 가지고 있다. 

 

---

웹에서 컴포넌트가 생긴 이유

재사용성의 가능성 및 다양한 UI/UX를 제공해야 하기 때문에 점차 컴포넌트가 늘어남

참고할 수 있는 UI 컴포넌트 이름들 해당 링크 참고 (다양한 컴포넌트들의 이름을 확인할 수 있다) - 컴포넌트 

---

 

질문 시간

HeadLess 라이브러리에 대한 설명

dialog를 위한 기능만을 제공하고 style은 자체적으로 만들어야 한다. 

커스텀훅은 headless component를 만들기 위한 패턴이다. 

contednteditable: 전역 특성(전역 attributes: 어떤 요소든 다 쓸 수 있는 attribute이다) 

어떤 요소든 contenteditable를 넣으면 text editor로 작동한다. 

위처럼 태그와 상관없이 useEditable를 사용하면 editor 기능으로 작동하게 된다. 

 

• 컴포넌트 pattern에 대한 자료: https://www.patterns.dev/

Patterns.dev - Modern Web App Design Patterns

 

https://kentcdodds.com/blog