리액트에서 @loadable/component로 코드 스플리팅 하기

느린 첫 로딩을 줄이는 똑똑한 방법React 프로젝트를 만들다 보면, 어느 순간 빌드된 번들 크기가 커져서 페이지 진입이 느려지는 현상을 겪게 된다.그럴 때 자주 듣게 되는 말이 바로 "코드 스플리팅"React 공식적으로는 React.lazy()와 Suspense를 쓰는 걸 권장하지만, 여기엔 살짝 불편한 점도 있다.그래서 나온 게 바로 @loadable/component라고 한다 @loadable/component란?@loadable/component는 React 컴포넌트를 동적으로 불러오고, 필요할 때만 로드하는 방식으로 렌더링 최적화를 도와주는 라이브러리이다.공식 문서: https://loadable-components.com/ Loadable ComponentsThe recommended Co..

• format_list_bulleted React
• · 2025. 8. 18.
• textsms

signal에 대해서 알아보고, state와 비교 (React에서는 signal이 부적합한 이유) ⚾️

React에서 Signal 기반 상태관리의 한계와 대안요즘 상태관리에 대해서 알아보면 signal, valtio, jotai, zustand… 다양한 선택지가 있다.그중에서도 Preact의 signal을 접하고, 리액트에 접목하는 것을 생각해봤는데, 막상 해보니 값은 바뀌는데 화면이 안 바뀐다;어째서 React에서 signal은 사용하지 못하는걸까?Signal vs State1. React의 useStateconst [count, setCount] = useState(0);값을 바꾸면 (setCount) → 컴포넌트 전체가 리렌더링됨.값에 접근하려면 항상 count라는 변수로 직접 가져와야 함.상태는 함수형으로 관리되고, strict mode에선 두 번 실행 등 여러 규칙이 있음.2. Preact Sig..

• format_list_bulleted 웹 개발
• · 2025. 8. 7.
• textsms

React에서 우클릭 메뉴를 커스텀하게 만들기 (onContextMenu 이벤트를 활용한 간단한 메뉴 구현) 😘

웹에서 우클릭하면 브라우저 기본 메뉴가 뜨는 건 너무나 당연하지만,가끔은 이걸 내 맘대로 커스터마이징하고 싶을 때가 있다.예를 들면 다음과 같은 케이스가 있다 💁특정 영역에서만 동작하는 우클릭 메뉴게임 UI처럼 우클릭 시 전용 액션을 띄우기우클릭으로 관리자 전용 기능 메뉴를 보여주기…같은 요구사항 말이다.이전에 그런 기능이 필요해졌고,그래서 시작된 삽질과 구현기를 공유해본다. 😎 📌 구현의 핵심 -> onContextMenu 이벤트 React나 Vanilla JS 모두에서 contextmenu 이벤트는 마우스 우클릭 시 발생한다.이걸 e.preventDefault()로 막으면?👉 브라우저 기본 메뉴가 안 뜬다.그리고 그 자리에 내가 만든 메뉴를 띄우면 원하는 스타일로 구현할 수 있다.const h..

• format_list_bulleted React
• · 2025. 7. 27.
• textsms

[FE 최적화 기술] Throttle, Debounce, useDeferredValue, useTransition 쉽게 정리하기 😊

리액트를 쓰다 보면 ‘입력이 느려요’, ‘렌더링이 버벅여요’ 같은 이야기를 들을 수 있다.(혹은 무한 랜더링...) 그럴 때 우리가 쓸 수 있는 대표적인 성능 최적화 기법 네 가지가 바로 다음과 같다.위의 두 가지는 일반적인 방법론이고, 뒤의 두 가지 훅은 리액트 18부터 사용할 수 있는 최적화 훅이다.🧂 Throttling💧 Debouncing🕓 useDeferredValue🌀 useTransition이 글에서는 각 개념이 언제, 왜, 어떻게 쓰이는지를 쉬운 예제와 함께 알아보자. [🧂 Throttling] 너무 자주 부르지 않게 하기특정 시간 동안 이벤트가 여러 번 발생하더라도, 일정 시간 간격으로만 함수를 실행하는 방식이다. 언제 사용할까?스크롤, resize 이벤트 같이 계속 발생하는 이..

• format_list_bulleted 웹 개발
• · 2025. 7. 21.
• textsms

Controlled 컴포넌트와 UnControlled 컴포넌트 😊 공통 컴포넌트 고민해보기

공통 컴포넌트를 개발할 때, 특히 input이 있는 경우 자주 고민하는 문제가 있다. 바로, 상태를 어디서 컨트롤하게 할지 고민하게 되는 것이다. 공통 컴포넌트 외부에서 컨트롤을 주입하여 외부에서 사용하도록 하는 방법이 있고, 공통 컴포넌트 내부에서 자체적으로 컨트롤되도록 설정하는 방법이 있다. 전자의 경우는 좀 더 다양한 상황에서 사용할 수 있는 컴포넌트를 개발할 수 있다는 장점이 있다 🐥후자의 경우는 좀 더 선언적으로 컴포넌트를 생성하여 내부 구현이 어떻게 되었든 간에, 기능을 더 손쉽게 외부에서 가져다 사용할 수 있는 장점이 있다 🐣 근본적으로는 컴포넌트에서 상태 관리의 책임을 어디냐 두느냐, 에 대한 질문도 같이 포함되어 있다고 생각한다. Controlled VS Uncontrolled상태 소..

• format_list_bulleted React
• · 2025. 7. 13.
• textsms

리스트 가상화(Virtualization) - 성능 최적화를 위한 필수 기술 (많은 데이터 표현 시 최적화)

🎯 리스트 가상화란?많은 데이터를 렌더링할 때 성능을 최적화하는 기법으로, 실제로 보이는 항목만 렌더링하여 불필요한 리소스 사용을 줄이는 방식이다. 수천, 수만 개의 리스트를 한꺼번에 렌더링하면 성능 문제가 발생하는데, 가상화를 적용하면 이를 해결할 수 있다.🛠 구현 방식리스트 가상화를 구현하는 방법에는 여러 가지가 있지만, 여기서는 두 가지 방식을 소개한다.absolute 포지셔닝 방식리스트 전체 높이를 유지하면서 보이는 아이템만 absolute 위치 조정하여 렌더링.빠른 성능을 보장하지만, 일부 스타일이 변경될 경우 위치 계산이 틀어질 가능성이 있음.패딩(Padding) 방식위/아래에 div로 패딩을 추가하여 스크롤 위치를 조정.스타일 변경에 강하고, absolute 없이 구현 가능하여 유지보수성..

• format_list_bulleted 웹 개발
• · 2025. 7. 4.
• textsms