#react
관련 글 28건
- velog수집됨 · 1일 전
Vanilla JavaScript로 VDOM 구현하기
React를 사용할 줄 알면 VDOM도 아는 걸까요? 직접 vanilla js프로젝트에 VDOM을 도입해봤어요.
javascriptreactvdom♡ 4원문 ↗
강경원· 2월 10일React Testing Library - 사용자 중심 테스트 작성하기
React Testing Library는 사용자가 컴포넌트를 어떻게 사용하는지 를 중심으로 테스트를 작성하도록 유도하는 테스트 도구입니다. 구현 세부사항보다는 사용자 관점의 동작을 검증하는 것이 핵심 철학입니다. 1. 기본 사용법 screen.getByRole , screen.getBy
reacttestingtesting-library- 강경원· 2월 10일
React 코드 스플리팅과 Suspense 패턴
번들 크기를 줄이고 초기 로딩 속도를 개선하기 위해 코드 스플리팅과 Suspense 를 어떻게 조합할지에 대한 간단한 메모입니다. 1. lazy와 Suspense 기본 React.lazy 와 Suspense 를 이용해 라우트 단위, 위젯 단위로 코드를 분리하는 패턴을 정리합니다. 2.
reactcode-splittingsuspense - 강경원· 2월 10일
React Hooks 베스트 프랙티스 - 실무에서 자주 놓치는 포인트
React Hooks는 함수 컴포넌트에서 상태와 생명주기를 다루는 강력한 도구입니다. 이 글에서는 useState , useEffect , useCallback , useMemo 등을 실무에서 올바르게 사용하는 방법과 자주 발생하는 실수들을 정리합니다. 1. useState 초기값과 함
reacthooksbest-practices - 강경원· 2월 10일
React Portal - DOM 트리 밖으로 컴포넌트 렌더링하기
React Portal은 컴포넌트를 부모 컴포넌트의 DOM 계층 구조 밖 에 렌더링할 수 있게 해주는 기능입니다. 모달, 툴팁, 드롭다운 같은 UI 요소를 z index 문제 없이 구현할 때 유용합니다. 1. Portal 기본 사용법 createPortal children, contai
reactportaldom - 강경원· 2월 10일
Framer Motion으로 React 애니메이션 다루기
Framer Motion을 사용해서 React 컴포넌트에 자연스러운 모션을 추가할 때 기본적으로 알아 두면 좋은 개념들을 메모합니다. 1. motion 컴포넌트 기본 motion.div 와 animate , initial , transition 속성으로 단순한 등장/퇴장 애니메이션을 만
reactanimationframer-motion - 강경원· 2월 10일
React 폼 상태 관리 전략
React에서 폼을 관리할 때 useState 만으로 처리할지, 라이브러리를 쓸지, 어디까지 커스텀 훅으로 뽑을지에 대한 기준을 정리하는 글입니다. 1. 컨트롤드 vs 언컨트롤드 각 방식의 장단점과, 실제로 어떤 화면에서 무엇을 선택하는 게 좋은지 간단한 예시와 함께 비교합니다. 2.
reactforms - 강경원· 2월 10일
React Error Boundary - 에러 처리와 사용자 경험 개선
React에서 컴포넌트 렌더링 중 발생한 에러를 우아하게 처리 하고, 앱 전체가 크래시되지 않도록 보호하는 방법을 Error Boundary로 구현할 수 있습니다. 이 글에서는 Error Boundary의 기본 개념과 실무에서 활용하는 패턴을 정리합니다. 1. Error Boundary
reacterror-boundaryerror-handling - 강경원· 2월 10일
React Context 성능 최적화 - 리렌더 줄이는 실전 패턴
Context는 전역 상태처럼 편하지만, 설계가 나쁘면 작은 변경에도 트리 전체가 리렌더될 수 있습니다. 이 글은 Context 사용 시 성능을 안정적으로 유지하는 패턴만 짧게 정리합니다. 1. 문제가 되는 구조 큰 객체를 한 Context에 몰아 넣기 Provider value가 렌더
reactcontextperformance - 강경원· 2월 10일
React 접근성(a11y) 가이드
React로 UI를 만들 때 기본적인 접근성 a11y 원칙을 지키기 위한 체크리스트를 정리해 둔 글입니다. 1. 시맨틱 마크업 div 남용 대신 적절한 HTML 태그를 쓰는 기준과, 스크린 리더가 어떻게 읽는지 간단한 예를 메모합니다. 2. 포커스 관리 모달, 드롭다운, 토스트 등에서
reactaccessibility - 강경원· 2월 10일
React Router 베스트 프랙티스
React Router로 라우팅을 구성할 때 자주 부딪히는 문제들을 정리하고, 실무에서 많이 쓰는 패턴을 간단히 메모해 둔 글입니다. 1. 라우트 구조 설계 중첩 라우트, 레이아웃 컴포넌트, 코드 스플리팅을 어떻게 배치할지에 대한 기준을 잡습니다. 2. URL 설계 원칙 자원 중심 RE
reactrouter - 강경원· 2월 10일
Zustand로 가벼운 React 상태 관리하기
Redux만 쓰기엔 부담스럽고, Context만으로는 아쉬울 때 쓸 수 있는 가벼운 상태 관리 라이브러리인 Zustand를 간단히 정리합니다. 1. 기본 스토어 정의 작은 예제로 create 함수로 스토어를 만들고, 컴포넌트에서 훅으로 사용하는 패턴을 기록합니다. 2. 상태 분리와 구조
reactzustandstate - 강경원· 2월 10일
React Concurrent Features - useTransition과 useDeferredValue
React 18의 Concurrent Features는 우선순위에 따라 렌더링을 조절 할 수 있게 해줍니다. useTransition 과 useDeferredValue 를 사용하면 사용자 입력을 즉시 반영하면서도, 무거운 업데이트는 지연시킬 수 있습니다. 1. useTransition으
reactconcurrentusetransition - 강경원· 2월 10일
React Server Components - 서버에서 렌더링되는 컴포넌트
React Server Components RSC 는 서버에서만 실행되고, 클라이언트로 JavaScript 번들을 전송하지 않는 새로운 컴포넌트 모델입니다. Next.js 13+ App Router에서 기본으로 사용되며, 성능과 번들 크기 최적화에 큰 도움을 줍니다. 1. Server
reactserver-componentsnext.js - 강경원· 2월 10일
React 성능 최적화 - 렌더링 최소화와 메모이제이션 전략
React 애플리케이션의 성능을 개선하려면 불필요한 렌더링을 줄이고 , 비용이 큰 계산을 메모이제이션하는 것이 핵심입니다. 이 글에서는 실무에서 자주 사용하는 성능 최적화 기법들을 정리합니다. 1. React.memo로 컴포넌트 메모이제이션 props가 변경되지 않으면 리렌더링을 건너뜁
reactperformanceoptimization - 강경원· 2월 10일
React 상태 파생(derived state) vs memo - 어디에 두는 게 맞을까?
React에서 자주 생기는 실수는 “계산 가능한 값”을 별도 state로 들고 가면서 동기화 버그 를 만드는 것입니다. 이 글은 derived state를 피하는 기준과, useMemo /계산 함수를 어디에 둘지 판단하는 실무 규칙을 정리합니다. 1. 결론부터 파생 가능한 값은 stat
reactstateusememo - 강경원· 2월 10일
Storybook으로 React 컴포넌트 문서화
Storybook을 사용해 React 컴포넌트를 카탈로그처럼 정리하고, 디자인 시스템에 가까운 구조를 만드는 과정을 기록하는 글입니다. 1. 기본 세팅과 스토리 작성 프로젝트에 Storybook을 설치하고, 버튼/입력 같은 기본 컴포넌트에 스토리를 작성하는 흐름을 정리합니다. 2. Co
reactstorybookui - 강경원· 2월 10일
React 컴포넌트 합성과 재사용 패턴
컴포넌트를 합성해서 재사용성을 높이고, prop drilling이나 거대한 컴포넌트를 피하는 패턴들을 간단히 정리합니다. 1. Children 기반 합성 children 과 렌더 props를 활용해 레이아웃과 로직을 분리하는 패턴을 예시와 함께 정리합니다. 2. Compound Comp
reactcomponents - 강경원· 2월 10일
React ref와 forwardRef - DOM 접근과 컴포넌트 간 ref 전달
React에서 DOM 요소에 직접 접근하거나, 자식 컴포넌트의 메서드를 호출할 때 ref 를 사용합니다. 이 글에서는 useRef , forwardRef , useImperativeHandle 의 사용법과 실무 패턴을 정리합니다. 1. useRef 기본 사용법 ref.current 는
reactrefforwardref - 강경원· 1월 28일
Next.js 16 정리 - React 18 시대의 풀스택 프레임워크
Next.js 16은 React 18을 기반으로 하는 풀스택 웹 프레임워크 로, 서버 컴포넌트 App Router , 스트리밍, 캐시, 미들웨어 등 프론트엔드와 백엔드를 모두 아우를 수 있는 기능을 제공합니다. 이 글에서는 Next.js 16에서 핵심적으로 알아야 할 개념과, 실무에서
next.jsreactapp-router - 강경원· 1월 28일
React 18 정리 - Concurrent Rendering과 실무 포인트
React 18은 Concurrent Rendering 과 자동 배칭 , Suspense 개선 등을 통해 UI를 더 부드럽게 만들고, 서버 렌더링을 강화한 버전입니다. Next.js 13+ / 16 같은 프레임워크에서도 React 18 기능을 전제로 설계되어 있기 때문에, 핵심 개념은
reactreact18 - 강경원· 1월 24일
React Query 심화 - 캐싱 전략과 무한 스크롤, 에러 핸들링
React Query는 클라이언트에서 서버 상태 데이터 를 관리하는 데 특화된 라이브러리입니다. 이 글에서는 기본 useQuery / useMutation 에서 한 단계 나아가, 캐싱 전략, 무한 스크롤, 에러 핸들링 을 중심으로 정리합니다. 1. 캐시 전략: staleTime, cac
reactreact-querynext.js - 강경원· 11월 29일
React에서 getBoundingClientRect 활용하기
React에서 getBoundingClientRect 활용하기 getBoundingClientRect 는 DOM 요소의 크기와 화면에서의 위치를 정확히 파악할 수 있는 메서드입니다. 이 메서드는 React에서 특정 요소가 화면에 보이는지 감지하거나, Lazy Loading, 애니메이션
react - 강경원· 11월 28일
Next.js에서 Utterances 댓글 시스템 구현하기
Next.js에서 Utterances 댓글 시스템 구현하기 Utterances는 GitHub 이슈를 활용하여 웹사이트에 간단하게 댓글 시스템을 추가할 수 있는 오픈 소스 프로젝트입니다. Next.js 프로젝트에 Utterances를 삽입하는 방법과, 테마 전환 시 깜빡임이 발생하는 방식
reactnext.jsutterances - 강경원· 11월 28일
React useMemo, useCallback, memo 차이점
useCallback , useMemo , 그리고 memo 는 모두 React에서 성능 최적화를 위해 사용되는 도구이지만, 각각의 목적과 사용 사례가 다릅니다. 아래에서 그 차이점을 설명하겠습니다. 1. useCallback 목적 : 함수를 메모이제이션하여 불필요한 재생성을 방지. 사용
reactusememousecallback - 강경원· 11월 26일
React Query useMutation
React Query useMutation 사용법 React Query는 React 앱에서 데이터를 fetch하고 캐시하는 것을 간단하게 만들어주는 라이브러리입니다. useMutation은 React Query에서 제공하는 함수 중 하나로, 데이터를 create, update, dele
reactreact-query - 강경원· 11월 26일
Next.js App Router 정리
Next.js의 App Router 는 13버전부터 도입된 새로운 라우팅 방식으로, 기존의 Pages Router 보다 더 현대적이고 유연한 기능을 제공합니다. App Router를 통해 서버 컴포넌트와 클라이언트 컴포넌트를 효과적으로 관리하며 React 18의 기능을 최대한 활용할 수
reactnext.js - 강경원· 11월 26일
React Query useQuery
react query v4 설치 react query 브라우저 호환 아무 버전이나 다 되는 줄 알았는데, 호환하는 브라이저가 있는걸 알았다. react query 설정하기 1. quertClient를 모든 컴포넌트가 접근하는 CRA는 app.tsx, Next.js는 \ app.tsx에
reactreact-querynext.js