728x90 fe47 상태 기반 렌더링 vs 시그널 기반 렌더링 React에서 상태 기반 렌더링 (State-based Rendering)과 시그널 기반 렌더링 (Signal-based Rendering)은 UI 업데이트 방식에서 큰 차이를 보인다. 두 개념을 비교하면서 자세히 설명하겠습니다. 상태 기반 렌더링 (State-based Rendering) React의 전통적인 렌더링 방식입니다. 컴포넌트는 state나 props가 변경될 때 전체 컴포넌트를 다시 렌더링합니다. React는 Virtual DOM을 사용해 변경된 부분만 실제 DOM에 반영하지만, 컴포넌트 함수는 다시 실행됩니다. 작동 방식 setState 또는 useState로 상태 변경 React는 해당 컴포넌트와 자식 컴포넌트를 다시 렌더링 Virtual DOM 비교 후 실제 DOM 업데이트 특.. 2025. 12. 19. useOptimistic: React 19의 새로운 기능 🆕 React 19에서 새로 추가된 기능 중 useOptimistic이 있다. useOptimistic는 낙관전 UI 업데이트 (Optimistic UI Update)를 쉽게 구현할 수 있는 훅이다. 이 기능은 서버 응답을 기다리지 않고 UI를 먼저 업데이트하여 사용자 경험 (UX)을 개선하는 데 초점을 맞춘다. 예를 들면, 좋아요 버튼을 클릭했을 때 서버 응답이 느리더라도 UI는 즉시 반응하도록 하는 방식이다. useOptimistic란? 목적: 비동기 작업 (예: 네트워크 요청)이 완료되기 전에 UI를 예상 결과로 업데이트 자동 롤백: 요청이 실패하면 낙관적 상태는 원래 상태로 자동 복구const [optimisticState, addOptimistic] = useOptimistic( state, .. 2025. 12. 17. 검색 파라미터 🔍 검색 파라미터는 사실상 UI 상태를 직렬화한 표현이다.예를 들어, 사용자가 상품 목록을 보고 있을 때 필터: filter=active 정렬: sort=asc 페이지네이션: page=2 이 값들이 URL에 들어가면 아래와 같은 장점이 생긴다. 브라우저 히스토리 지원: 뒤/앞으로 가기 시 동일한 상태를 복원할 수 있다.딥링크 가능: 특정 상태를 URL로 공유하면 다른 사용자가 동일한 화면을 볼 수 있다.공유 가능: URL을 복사하여 다른 사용자에게 보내면 동일한 필터와 정렬 상태가 유지된다. 왜 대부분의 앱은 문자열 파싱에 의존할까? window.location.search나 URLSearchParams로 접근하는 방식이 대부분이다.이 방식은 단순하지만 한계/문제가 있다. 타입 안전성 부족 모든 값이 문.. 2025. 12. 15. 5가지 노드 버전 관리자 비교 현재 기준, 많이 사용되거나 한 번쯤 들어봤을 노드 버전 관리자 NVM (Node Version Manager) N FNM (Fast Node Manager) PNPM Volta 내가 프로젝트 도중 투입이 되어 GIT에서 코드를 PULL 받고 실행해보려고 하는데 Node 버전 관련해서 오류가 뜨면서 실행하는 데 오래걸렸던 기억이 있다. 이유는 Node 버전이 안맞아서 (내가 낮은 버전을 사용하고 있어서) 그런거였는데 사소한 거지만 개발하는데 귀찮은 요소 중 하나이긴 하다. 검색을 하다 노드 버전 관리자를 알게 되었는데 Node.js의 버전을 쉽게 전환할 수 있도록 도와주는 셸 도구이다.그때에만 해도 NVM만 알고 있었지 이렇게 많은 종류가 있는지는 PNPM으로 프로젝트를 작업하게 된 후 알게 되어 이 .. 2025. 12. 4. 이전 1 2 3 4 ··· 12 다음 728x90
