devOhzl

회사 내부 모니터링 대시보드에서 수천 건 이상의 카드(Card) 컴포넌트를 한 화면에 표시해야 하는 요구사항이 있었습니다. 처음에는 단순히 Array.map을 통해 모든 데이터를 렌더링했으나, 아래와 같은 문제가 발생했습니다.렌더링 지연 : 한 번에 모든 컴포넌트를 그리다 보니, 브라우저 메인 스레드가 과부하되어 화면이 뜨기까지 20~30초 걸림스크롤 성능 저하 : DOM 요소가 늘어나면서 스크롤 시 FPS가 크게 떨어지는 문제 발생사용자 경험(UX) 악화 : API는 이미 빠르게 응답했는데, 렌더링이 끝나지 않아 로딩 스피너가 바로 사라지고도 빈 화면이 한참 동안 노출문제를 해결하기 위한 방법으로 리스트 가상화를 진행해보기로 했습니다. 리스트 가상화란 ?화면에 보이는 아이템만 실제로 렌더링하고, 나머지..

React에서 페이지 또는 컴포넌트를 동적 로딩할 때, React.lazy()와 Suspense를 사용하면 효율적으로 관리할 수 있습니다.   lazy()를 활용한 동적 로딩(Route 정리)기본적으로 React에서는 import를 사용하여 정적인 방식으로 컴포넌트를 불러옵니다.하지만, 페이지가 많아질수록 초기 로딩 속도가 느려지는 문제가 발생합니다.👉 이를 해결하기 위해 React.lazy()를 사용하면, 필요한 순간에만 컴포넌트를 불러올 수 있습니다.이 방식은 코드 스플리팅(Code Splitting)을 적용하여 성능 최적화에도 도움을 줍니다.  정적 로딩 방식 (비효율적인 예시)이 방식은 모든 페이지가 초기 로딩 시점에 한 번에 불러와지기 때문에 초기 로딩 속도가 느려질 수 있다.import Ho..

React 프로젝트에서 SVG 아이콘을 효율적으로 관리하고 사용하는 방법입니다.특히, vite-plugin-svgr와 import.meta.glob을 활용하여 SVG 파일을 자동으로 불러오고 React 컴포넌트처럼 사용합니다.SVG 파일을 React에서 사용하는 이유SVG는 벡터 기반의 그래픽 형식으로 다음과 같은 장점이 있습니다:확장성: 해상도와 무관하게 선명하게 렌더링유연성: 색상, 크기, 스타일 등을 동적으로 조정 가능가벼움: 아이콘과 같은 간단한 그래픽에서 번들 크기를 최소화React에서 SVG를 사용하면 동적인 UI 구성과 함께 코드의 재사용성이 증가합니다. Vite에서 SVG를 React 컴포넌트로 변환하기1. vite-plugin-svgr 설치vite-plugin-svgr는 SVG 파일을 R..

데이터그리드와 같은 동적 컴포넌트를 다루기 위해 Zustand를 선택했으며, 데이터를 효율적으로 관리할 수 있습니다. 데이터그리드는 한 화면에서 두 개 이상이 들어갈 수 있으므로, 각 컴포넌트를 독립적으로 관리하기 위해 id를 활용하여 상태를 구분했습니다. 기존 코드의 문제점Zustand만으로 상태 관리를 하려면 상태를 수동으로 복사(...state)해야 합니다. 특히 데이터그리드를 한 화면에서 여러 개 사용해야 하는 경우, 각각의 컴포넌트를 구분하기 위해 id를 활용합니다. 이로 인해 상태 업데이트 로직이 더욱 복잡해지고 중복이 발생합니다.export const useDataGridStore = create((set) => ({ grids: {}, initializeGrid: (id) => s..

⭐ React-hook-formReact Hook Form은 React에서 간단하고 효율적으로 폼을 관리하기 위한 라이브러리입니다. 폼 관리 방식React Hook Form은 Uncontrolled 방식과 Controlled 방식이 있다.Uncontrolled : register 함수를 사용하고 두 번째 파라미터를 사용하여 유효성 검증이 가능하며 DOM과 직접적으로 연결되어 성능이 우수하다. Controller : Controller 컴포넌트의 rules 속성을 사용하여 유효성 검증이 가능하며 주로 외부 UI 라이브러리와 통합 시 사용한다.API : useForm Hookregister : Uncontrolled 방식으로 사용하기 위해 사용됩니다. 요소의 속성으로 전달되어야 하는 값들을 반환하는 함수입니..

로그인 폼을 구현하던 중, 입력 필드의 rules를 확인하여 FormHelperText를 표시하는 과정에서 리렌더링 문제가 발생했습니다. 구체적으로, ID 입력 필드에서 에러 처리를 했을 때 콘솔에 ID와 PW 필드가 모두 리렌더링되는 상황을 겪었습니다.이는 각 필드가 독립적으로 리렌더링되지 않고 모든 필드가 동시에 리렌더링되었기 때문입니다. 이러한 문제를 해결하기 위해 React.memo를 사용해 최적화를 시도했습니다.  useMemo 방식과 비교하여 각각의 방식이 어떻게 성능에 영향을 주는지 예시와 함께 작성했습니다.React 리렌더링 방식React는 부모 컴포넌트가 리렌더링될 때 자식 컴포넌트도 기본적으로 리렌더링을 시도합니다. 리렌더링 시도는 "컴포넌트를 다시 그린다"는 의미가 아니라, 변경 사항..