Library/React

github.com/radix-ui/react-useControllableState 소스코드 primitives/packages/react/use-controllable-state/src/useControllableState.tsx at main · radix-ui/primitivesRadix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos. - radix-ui/primitivesgithub.com  🕹️ useControllableState() 란?Radix 라이브러리에서 제공하는 React 훅으로, 제..

상단 내용 작성 예정  ( 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 요소를 수정할 때 해당 컴포넌트만 업데이트하면 된다.이는 코드의 가독성을 ..

"🍡 보기 좋은 떡이 먹기도 좋다"사람의 오감 중 가장 발달한 감각이 시각이라고한다.외부 자극에 대한 반응이 가장 민감하고 빠른 감각이기도한다고 한다.위 속담이 괜히 있는 말이 아니며, 작자는 요리를 취미로 하면서 플레이팅이 중요하다고 생각한다.기능도 중요하지만, 디자인 또한 무시할 수 없으며, 이 디자인이 사용자에게 얼마나 편리한지 또한 굉장히 중요하다. 전체적인 디자인을 위해 컴포넌트를 하나씩 제작하게 될텐데 이때, 유용한 Headless UI에 대해 알아보자.  🤕 HeadlessHeadless란, 디자인 없이 기능만 제공해주는 라이브러리이다.접근성, 상태관리와 같은 복잡한 동작을 처리하면서 개발자가 스타일을 완전히 제어 할 수 있다. `MUI`, `Bootstrap` 등의 외부 라이브러리는 기..

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

참고사이트 • 리액트 공식 문서 - Custom Hook ⚙️ Custom Hook 앞서 게시글에서 다양한 Hook을 사용해왔다. React에는 useState, useContext, useEffect와 같은 여러 내장 Hook이 함께 제공된다. 데이터를 가져오거나, 사용자가 온라인 상태인지 추적하거나 채팅방에 연결하는 등 좀 더 구체적인 목적을 위해 Hook이 있었으면 하는 경우가 있다. React에서 이러한 Hook을 모두 지원할 수 없다. 그래서 어플리케이션 요구사항에 맞게 직접 자신만의 Hook을 만들 수 있다. 🧐 왜 사용할까? 재사용성이 높아 코드가 간결해진다. 내장 Hook을 사용할 수 있다. 독립적으로 동작한다. 📡 구성요소 간 논리 공유 네트워크에 크게 의존하는 앱이 있다고 상상해보자. ..

참고사이트 • 리액트 공식 문서 - useContext 🌐 useContext useContext는 컴포넌트의 Context를 읽고 구독하게 해주는 리액트 Hook이다. 리액트에서 데이터값을 하위 컴포넌트로 전달하기 위해 컴포넌트 호출 시, 데이터 prop을 담고, 해당 props를 이용하여 데이터를 사용한다. useContext는 해당 과정에 상관없이 useContext로 감싼 컴포넌트들을 해당 데이터를 접근할 수 있도록 도와준다. 비슷한 기능의 외부 라이브러리로는 recoil이 있다. 📦 Parameter useContext 컨텍스트를 읽고 구독하려면 컴포넌트 최상위에서 호출해야한다. const value = useContext(SomeContext); • SomeContext: 해당 컨텍스트는 cr..

참고 사이트 • 리액트 공식 문서 - useCallback • 별코딩님의 youtube - useCallback 강의 🪣 useCallback useCallback은 재렌더링 사이에 함수 정의를 캐시할 수 있는 React Hook이다. 📢 참조 useCallback 재렌더링 사이에 함수 정의를 캐시하려면 구성 요소의 최상위 수준에서 호출하면 된다. const cachedFn = useCallback(fn, [dependencies]); 📦 Parameters • fn: 캐시하려는 함수이다. 모든 인수를 취하고 모든 값을 반환할 수 있다. React는 초기 렌더링 중에 함수를 다시 반환한다(호출X). 다음 렌더링에서 dependencies가 변경되지 않은 경우 동일한 기능을 다시 제공하며, 그렇지 않다면 ..