React의 flushSyncReact 18에 도입된 react-dom 패키지의 함수로, 상태 업데이트를 강제로 즉시 동기적으로 처리하도록 만드는 역할을한다. 리액트는 불필요한 리렌더링을 줄여 애플리케이션의 성능 최적화를 위해, 기본적으로 상태 업데이트를 비동기적으로 처리하고 여러 업데이트를 하나로 묶어(batching) 한번에 렌더링 하는 핵심적인 메커니즘으로 동작한다.이때 자동 배치가 하나로 묶이는 기준은 아래와 같다.동일한 이벤트 핸들러 내부의 모든 상태 업데이트인 경우상태 업데이트가 아닌경우, 예를들어 API 호출이나 로컬 변수 변경, DOM 조작등은 배칭의 대상이 아니다. 이 경우에는 코드가 위치한 순서대로 실행된다.비동기 이벤트 핸들러 및 프로미스 내부 코드 블록 (React 18+)만약, 한..
웹 렌더링 기법 종류 간단히 알아보자 (CSR, SSR, SSG, ISR 등..) 웹 렌더링 기법의 종류CSR (Client-Side Rendering) SSR (Server-Side Rendering)ISR (Incremental Static Regeneration)SSG (Static Site Generation)DPR (Deferred Page Rendering)SPR (Streaming Page Rendering)ESR (Edge-Side Rendering) RSC (React Server Components) 개념은 이해하고 넘어가면 좋다. 하지만 꼭 다 정확한 정보까지 학습할 필요는 없다. 그 자체의 개념들도 있고, 같이 사용가능한 기법들도 있다. 간단히 알아보자. CSR (Client..
별점 컴포넌트를 만들어보자
react(nextjs), tailwind를 통해 별점 컴포넌트를 만들어보자. 준비물로는 5점짜리 별 5개가 이어진 이미지 2장이 필요한데, 별이 채워진 이미지와 별이 채워지지않은 이미지가 필요하다. (하나의 별만 있다면 크기를 지정하고 반복해서 배경이미지를 repeat 시키면 될 듯하다.) 그 이유는 마우스가 호버될때, 아래 영상과 같이 마우스 커서에 따라 채워진 이미지를 보여주기 위함이다. 컴포넌트 코드'use client';import clsx from 'clsx';import React, { useState } from 'react';interface Props { value?: number; onChange?: (radio: number) => void; width?: num..
React의 가상 DOM, Vue의 가상 DOM과 비교 가상 DOM이란?DOM (Document Object Model)브라우저가 제공하는 문서 객체 모델HTML 요소를 트리 구조로 표현하며, 브라우저에서 렌더링되는 실제 DOM을 말한다.실제 DOM은 업데이트가 발생할때마다 전체 DOM 구조를 다시 계산하고 렌더링한다. 가상 DOM (Virtual DOM)메모리 상에서 실제 DOM의 경량화된 사본을 만드는 개념으로 DOM 상태를 Javascript 객체로 나타내어 빠르게 연산할수 있다. 실제 DOM 조작 전에 변경 사항을 비교하고 필요한 부분만 실제 DOM에 업데이트 하는 방식으로 성능 최적화를 하기 위하여 생성된다.리액트는 가상 DOM을 업데이트 할때 최소한의 DOM 업데이트를 보장하기 때문에 복잡한 ..