Component..?

일반인에게 컴포넌트란 간단하게 자동차의 어느 부분이 고장이 났다고 가정해보자.
엔진이 고장나면 엔진만 새것으로 바꾸던가 고치면 되는데 이것이 일반인이 생각하는 컴포넌트(Component)이다.

웹 개발자 시선에서의 컴포넌트란 각자 어느 한 부분을 책임지는 html 요소라고 생각하면 된다.

Web component와 React component의 차이

Web component와 React component는 둘 다 웹 애플리케이션에서 재사용 가능한 UI 요소를 만들기 위해 사용된다.
하지만 이 두 가지 접근 방식에는 중요한 차이점이 있다!

• Web component는 표준 웹 기술로만 구현된다. Web component는 Custom Elements, Shadow DOM, HTML Templates, HTML Imports 등의 웹 표준에 따라 구현된다. 한마디로 표준이기 때문에, 별다른 설치 같은 것 없이 구현되는 것이다.
  하지만 React component는 JavaScript 라이브러리인 React에 의존하기(ex.State 또는 가상 DOM을 생성하는 렌더링 방식 등등..) 때문에 별도의 설치를 해야 구현되는 차이점이 존재한다.

Headless component란?

Headless component는 기능은 존재하지만 스타일이 없는 컴포넌트를 의미한다. Headless component 라이브러리로는 https://headlessui.com/, https://www.radix-ui.com/ 가 있다.

외부 UI 라이브러리인 MUI나 Ant Design을 사용 할 경우 기획자나 디자이너의 의도대로 기능을 새로 추가하거나 디자인을 변경하고 싶어도 수정하기가 매우 어려운 단점이 존재하는데, 그래서 나온 컴포넌트 개념이다.

예를 들어 캐러셀을 사용해야 하는 상황에서 디자이너한테 다짜고짜 Ant Design의 캐러셀을 사용한다고 말해보면, 욕을 하거나 그 디자이너는 회사를 떠날 것이다.. 디자이너가 분명히 하고 싶어하는 디자인이 있을 것이고, 캐러셀을 직접 구현하기는 어렵다면, Headless component를 사용하여 디자이너 요구사항에 맞게 스타일을 하면 된다.

• 장점
  • 마크업과 스타일을 완벽 제어 가능
  • 모든 스타일링 패턴 지원(ex. CSS, CSS-in-JS, UI 라이브러리 등)
  • 작은 번들 사이즈

• 단점
  • 추가적인 설정 필요
  • 마크업, 스타일 혹은 테마 모두 지원x

컴포넌트를 잘 설계하는 팁...??

• Top ⇒ Down 하향식 사고방식
  • 위에서 아래로
  • 페이지 단위부터 작은 컴포넌트로
  • 내가 대충 만들고 떼어내는 것이라 쉬워요
  • (리액트를 사용하는 사람)
  • Next.js 공부가 컴포넌트 공부 방법을 망치고 있다….???
• Bottom ⇒ Up 상향식 사고방식
  • 아래에서 위로
  • 작은 컴포넌트부터 페이지로
  • 엄청 어렵습니다…
  • 누군가에게 쓰일 컴포넌트를 만든다는게 쉽지 않아요
  • (리액트를 만드는 사람)

그외 프론트엔드의 변화 과정..

2016년도만 해도 Bootstrap + jQuery만 사용하면 프론트엔드 개발자였고...

2017년도에는 React사용자가 늘어났지만 여전히 많은 사람들은 Redux 조차 다루지 못했었고...

2018년도에는 여전히 TypeScript에 대한 거부감이 심했고...

2019년도는 함수형 프로그래밍의 시작인 Hooks의 등장과 CSS in JS의 사용이 증가했고...

2020년도엔 React & Hooks API & TypeScript +@Axios 생태계가 구축됨과 동시에 뒤늦게 SEO 대응의 심각함을 깨우치면서 러닝커브에 Next.js, Nuxt,js에 대한 고민이 시작되었고...

2021년은 AngularJS의 몰락과 Next.js, Nuxt,js에 사용 기업이 점점 늘어가고, React Query vs SWR (Server State)에서 React Query가 점점 우위를 점하고...

2022년엔 Next.js & TansStack Query 거의 필수 스택으로 독주를 하고 있고, Redux 사용자는 Zustand, Recoil 사용자는 Jotai로 상태관리의 새로운 선택지가 등장하고...

2023년엔 RSC인 리액트 서버 컴포넌트가 등장하고, 기존 TypeScript 보다 빡빡한 타입의 tRPC, Zod 열풍이 시작한다...

요즘 Redux만 보더라도 레거시라고 부르는데 정말로 년도로 따졌을 때, 얼마 안된 친구인걸 보면 이 바닥은 최근들어 정말 많이 빠르게 변하는 것 같다. 물론 이러한 변화의 흐름을 선도하는 것도 좋지만, 앵귤러의 사례를 보면 무작정 좋은 것도 아닌거 같다. 이러한 변화로 스트레스를 받기보다는 그저 묵묵히 자기 할일을 하면서 꾸준히 개인시간에 공부를 소홀히 하지 마는것이 지금 내가 할 수 있는 일 같다..