관련글가상돔(Virtual DOM)과 React Fiber 구조 React의 동시성 기능 (Concurrent Features)기존 렌더링 방식보다 부드럽고 반응성 높은 사용자 경험을 제공하기 위해 도입된 새로운 렌더링 아키텍처이다.리액트 18 이후부터는 기본적으로 일부 기능이 내장되어있다. 핵심은 느린 컴포넌트 때문에 전체 앱이 버벅이는 현상을 줄이기 위함이고, 그렇기 때문에 리액트가 렌더링을 중단하고 나중에 이어서 재개할 수 있는 기능들을 제공하게되었다.주요 기능으로는 startTransition, useDeferredValue, Suspense, streaming SSR등이 있다. 기존 렌더링과의 차이기존에는 렌더링이 동기적으로 한번에 진행되었다. 따라서 무거운 업데이트가 렌더링되어야할때 UI가 멈..
React의 예측 가능한(predictable) UI를 위한 설계 철학 리액트는 '어떤 상태가 주어지면, 항상 그에 대응하는 동일한 UI를 만들어야 한다'는 원칙을 따르고 있다.이것이 바로 예측 가능(predictable)한 UI를 말한다.// 상태가 같으면const isLoggedIn = true;// 언제나 같은 UI를 출력해야 함return isLoggedIn ? : ; 예측 가능한 UI는 왜 중요할까?입력값(state)을 고정하면 결과(UI)를 예측할 수 있어 테스트가 쉬우며, 상태만 보면 어떤 UI가 나올 지 알 수 있기 때문에 디버깅이 쉽다.컴포넌트는 side effect 없이 상태에 따라 렌더링되어 유지보수가 쉬우며, 선언형 프로그래밍이므로 명령형보다 DOM 조작이 직관적이다. 예시비예..
React 18에서 Strict Mode React Strict Mode란?개발 환경에서만 작동하며 잠재적인 버그나 비권장 사용으로 인해 사이드 이펙트를 조기에 감지하기 위해 동작하는 React의 개발 도구이다. React 18에서의 Strict Mode는 '더 엄격해졌다'React 18에서 Concurrent Features (비동기 렌더링, 자동 배치 등)이 도입되면서 Strict Mode 아래에서 일부 함수형 컴포넌트가 의도적으로 두번 호출된다. - (관련글, 가상돔(Virtual DOM)과 React Fiber 구조)즉, 개발자들이 혼란스러워 할 수 있는 '컴포넌트가 두 번 렌더링 되는 현상'이 여기에 포함된다.개발 모드 환경에서만 한정으로 의도적으로 추가적인 재실행을 발생시키는데,초기 ..
프로젝트에서 Vue 쓸까? React 쓸까? 개발자의 취향 + 팀환경 + 프로젝트 성격에 따라 고를 수 있을듯하다. 빠르게 MVP 만들고 싶은 스타트업 / 프로토타입Vuev-model, 템플릿 문법, ref() 만으로도 빠른 UI 구현 가능학습 부담이 적고 디자이너/퍼블리셔도 진입 장벽이 낮다작은 팀에서 생산성 우선이라면 효율적이다 대규모 팀, 복잡한 상태 관리, 모듈화, 협업 중요React단뱡향 데이터 흐름은 유지보수, 디버깅, 테스트에 최적화 되어있다.상태와 로직 분리가 깔끔하고 커스텀 훅 기반으로 확장성이 좋다.Typescript + React + TanStack Query + Zustand/Redux 조합 = 실무에서 안정성, 구조화 조합에 좋다. UI/UX 실험 위주, 애니메이션이 많은 앱 (..