리액트 패턴: asChild로 컴포넌트 태그 유연하게 변경하기

리액트를 사용하다 보면 공통 컴포넌트의 HTML 태그를 유연하게 바꿔야 할 때가 종종 있습니다. 예를 들어 버튼 컴포넌트 내부에서 태그를 나 로 변경하고 싶을 경우가 생기죠. 이럴 때 사용하는 대표적인 패턴이 바로 asChild입니다.컴포넌트 코드 export function Button({ as, ...props }) { const Comp = as ?? "button"; return ;}이 구조에서 as prop을 통해 태그나 컴포넌트를 유연하게 바꿀 수 있습니다.사용 예시 이렇게 사용하면 이 아닌 가 렌더링되므로, 사용자 정의 태그로 손쉽게 대체할 수 있습니다.해당 패턴의 단점기본 태그 외에 a 태그의 href, target 등의 속성을 설정하려면 props를 하나하나 넘겨야 하므로 다소 번거..

• format_list_bulleted react
• · 2025. 6. 29.
• textsms

React 슬라이더 구현: Swiper 설치, 사용법, 공통 컴포넌트화까지

이 글에서는 Swiper 라이브러리를 React에 설치하는 방법, 기본 사용법, 그리고 Swiper를 공통 컴포넌트로 분리하여 재사용하는 방법까지 단계별로 다룹니다. Swiper를 활용해 슬라이더 컴포넌트를 효율적으로 구성하고, 다양한 화면에서도 독립적인 인스턴스로 관리하는 방법도 알아보겠습니다.React Swiper 설치npm i swiper기본 사용법// 스와이퍼 컴포넌트import { Swiper, SwiperSlide } from 'swiper/react';// 스와이퍼 CSSimport 'swiper/css';export default () => { return ( console.log('slide change')} // 슬라이드 변경 시 코드 onSwiper={(swiper)..

• format_list_bulleted react
• · 2025. 6. 21.
• textsms

리액트 디자인 패턴: 제어 컴포넌트 vs 비제어 컴포넌트

리액트(React)에서 폼(form)이나 입력 필드(input)를 다룰 때, 제어 컴포넌트(Controlled Component)와 비제어 컴포넌트(Uncontrolled Component)라는 두 가지 패턴을 선택할 수 있습니다. 두 방식의 차이점, 각각의 장단점, 그리고 실전 코드 예시를 통해 언제 어떤 방식을 써야 하는지 알아보겠습니다.1. 제어 컴포넌트란?제어 컴포넌트는 입력값을 React의 상태(state)로 직접 관리하는 방식입니다. 사용자의 입력 이벤트는 `onChange`를 통해 상태를 업데이트하며, 해당 상태를 다시 컴포넌트의 `value`로 전달함으로써 UI와 상태가 항상 동기화됩니다.1.1 특징입력값을 상태로 관리유효성 검사, 조건부 렌더링 등 세밀한 제어 가능데이터 흐름이 Re..

• format_list_bulleted react
• · 2025. 6. 14.
• textsms

React Responsive로 반응형 구현하는 법: useMediaQuery와 커스텀 훅 실전 예제

리액트에서 처음 반응형 웹을 구현하면서 react-responsive 라이브러리를 접하게 되었습니다.CSS의 미디어 쿼리만으로도 어느 정도 반응형 처리가 가능하지만, 리액트의 특성상 "스타일"이 아닌 "렌더링 로직" 차원에서 분기 처리가 필요한 경우가 생깁니다.이번 글에서는 react-responsive의 기본적인 사용법과 함께, 커스텀 훅을 활용한 보다 유연하고 재사용성 높은 반응형 로직 구현 방법을 소개합니다.1. React Responsive 세팅하기npm install react-responsive --save2. useMediaQuery 훅으로 화면 분기 처리하기react-responsive에서 제공하는 useMediaQuery 훅은 지정한 미디어 쿼리 조건을 기반으로 true/false를 반환..

• format_list_bulleted react
• · 2025. 6. 7.
• textsms

SVGR로 변환한 SVG 컴포넌트에서 사이즈 조절이 안 될 때 -removeViewBox: false 설정하기

viewbox & svgr커스텀한 SVG 아이콘 컴포넌트에서 사이즈 변경이 제대로 적용되지 않는 문제가 있었습니다.문제의 원인은 SVG의 속성인 viewbox가 누락되었기 때문입니다. viewbox는 svg 이미지의 크기, 비율을 제어하는 데 사용됩니다. 이 값이 없으면 사이즈 계산이 정상적으로 이뤄지지 않습니다. 제 경우, SVGR이 컴포넌트로 변환하는 과정에서 최적화 기본 설정으로 인해, viewbox 속성을 자동으로 제거하고 있었습니다. 이를 해결하기 위해 SVGO 설정에서 removeViewBox : false (viewbox 제거 비활성화) 속성을 추가하여 해결했습니다.❗SVGO는 SVG 파일을 최적화하는 데 사용되는 Node.js 기반의 라이브러리이자 CLI 도구입니다.SVGR은 svgo를 ..

• format_list_bulleted react
• · 2025. 5. 31.
• textsms

리액트 성능 최적화 : useMemo와 useCallback

리액트 애플리케이션에서 불필요한 연산과 렌더링을 줄여 성능을 향상시키는 방법 중 하나는 메모이제이션(Memoization) 입니다.이 글에서는 useMemo와 useCallback의 차이점과 실제 적용 예제를 통해 메모이제이션을 이해하고 실무에 적용하는 방법을 소개합니다.메모이제이션이란?메모이제이션이란 이전에 계산한 값을 메모리에 저장해중복 계산을 방지하여 자원을 효율적으로 사용할 수 있게 하는 코딩 기법입니다.useMemo이란?React에서 제공하는 성능 최적화 도구입니다. 계산 비용이 높은 작업을 메모이제이션하여 불필요한 재계산을 방지하는데 사용됩니다. 동일한 값을 반환하는 함수가 있어 반복적인 호출이 필요할 때, 해당 값을 메모리에 저장한 후, 의존성 배열의 변화가 감지되는 경우에만 재계산합니다.언..

• format_list_bulleted react
• · 2025. 5. 26.
• textsms