컴포넌트

리액트 컴포넌트를 개발하다보면, 컴포넌트를 어떻게 분리해야할 것인가를 많이 고민한다.또, 분리하여 어떠한 패턴을 이용하여 작성할지도 고민한다. 우선 컴포넌트를 분리하는 기준에 대해 알아보자. 🦴 컴포넌트 분리1. ♻️ 재사용성 (Resualbility)👉🏻 동일한 UI나 기능을 여러 곳에서 사용할 가능성이 있는 경우 컴포넌트를 분리한다.👉🏻 ex. Button, Modal, Card, Input 코드 좀 더 이해하기 >> 유틸함수 cn(tailwind-merge) tailwind-mergeMerge Tailwind CSS classes without style conflicts. Latest version: 3.1.0, last published: 3 days ago. Start using ta..

상단 내용 작성 예정  ( 2025-01-31 ~ ) 2025. 02. 02 추가∙ useControllableState() 공부∙ ReactNode, ReactChild, ReactElement 공부 후, 재작성 될 예정 (아마 코드 또한 변경될 예정)   합성 컴포넌트의는 다음과 같다 1. Header, Body, Footer를 모두 호출한 경우2. Body와 Footer만 호출한 경우3. Body만 호출하고 Body에 스타일링을 덮어씌운 경우사용자가 필요한 컴포넌트만을 호출함에 따라 다양한 모양의 컴포넌트를 만들 수 있다.또한 각 컴포넌트에 className(tailwindCSS), style을 props로 넘겨주어 디자인을 수정할 수 있다. 📄 App.tsx (필요한 경우 펼쳐서 보기)더보기im..

참고사이트• 카카오 - FE 기술 블로그 / 컴포넌트 추상화• velog - jinoo.io / 컴포넌트를 레고처럼 쌓아보자!  *추상화: 여러 가지 사물이나 개념에서 공통되는 특성이나 속성 따위를 추출하여 파악하는 작용  💀 컴포넌트의 추상화현대 프론트엔드 개발은 컴포넌트 기반의 프레임워크(혹은 라이브러리)를 사용하여 개발하게 된다.컴포넌트 단위의 개발로 장점은 무엇일까? 👍🏻 장점1. 재사용성: 컴포넌트는 독립적이고 재사용 가능한 코드 블록으로, 여러 곳에서 동일한 컴포넌트를 사용할 수 있다.이는 코드의 중복을 줄이고 유지보수를 용이하게 한다.2. 유지보수 용이성: 컴포넌트는 독립적으로 관리되기 때문에 특정 기능이나 UI 요소를 수정할 때 해당 컴포넌트만 업데이트하면 된다.이는 코드의 가독성을 ..

참고사이트* 카카오 FE 기술 블로그 아토믹 디자인을 활용한 디자인 시스템 도입기 | 카카오엔터테인먼트 FE 기술블로그정호일(harry) 카카오페이지에서 웹 프론트엔드를 개발하고 있습니다. 집보다 밖에 돌아다니는 걸 좋아합니다.fe-developers.kakaoent.com해당 페이지의 내용을 담고 있으며, 머릿속에 담기 위해 적어가면서 공부 (끄적.. 끄적..)  🧩 컴포넌트의 파편화비슷한 모양 및 기능을 컴포넌트가 여러 개 있다고 생각해보자.이걸 각기 하나 하나 다 만들어내는 것에 대해서는 구현하면 컴포넌트 파편화라는 제 각각의 컴포넌트가 발생한다.그럼 유지보수 할 때, 각각의 파편화된 컴포넌트를 찾아서 고쳐야하는 문제점이 발생한다. ❓ 왜 쓰는건데?디자인 시스템내에서 수 많은 수정 작업들이 일어난..