1. 어떤 경우에 컴포넌트가 재렌더링 되는가?React에서 컴포넌트는 다음 조건 중 하나라도 충족되면 다시 렌더링됩니다:props가 변경됨state가 변경됨부모가 렌더링되면 자식도 기본적으로 렌더링됨따라서 렌더링을 최적화하려면, 불필요한 props, state, 부모의 렌더링 영향을 최소화해야 합니다. 2. 사용자 흐름 유추 및 컴포넌트 구조 ├── // 할일 입력 ├── // 할일 목록 │ ├── // 개별 할일 │ └── -> memo + key 사용 └── (선택) 1. 할 일 목록(todoList)은 App 최상단에서 상태로 관리합니다.2. 입력 값은 TodoInput에서 useState로 관리합니다.3. 등록 시 App으로 ..

CSR (Client-Side Rendering)CSR은 브라우저가 HTML을 직접 만들고, 자바스크립트로 화면을 동적으로 구성하는 렌더링 방식입니다 초기 로딩 과정 (CSR 기준)브라우저가 서버에 요청하면 빈 HTML + JS 번들을 받습니다.이 JS번들을 완전히 다운로드, 파싱, 실행합니다.React컴포넌트가 실행되고, 화면이 만들어집니다.이후 페이지 렌더링 과정 (CSR에서 페이지 전환 등)이미로드된 JS가 클라이언트에서 동작하면서 화면을 다시 그려줍니다.React 가상 DOM을 사용해 변경된 부분만 찾아내어 실제 DOM에 최소한의 변경 적용변경된 DOM에 대해 CSS 스타일 재계산이 이루어집니다.변경된 DOM과 CSS 정보를 바탕으로 렌더 트리를 재구성리플로우(레이아웃 재계산)와 리페인트(화면 다..

https://github.com/acdlite/react-fiber-architecture 이 문서를 참고하였습니다.1. React Fiber란 무엇인가요?React Fiber는 React의 핵심 알고리즘(reconciler)을 완전히 새로 구현한 것입니다. 애니메이션, 레이아웃, 제스처와 같은 사용자 경험 중심 작업을 더 잘 처리하려고 설계되었습니다. 기존에는 어떤 문제가 있었던 걸까요?React 15까지는 재귀호출기반 동기 렌더링이였습니다. 즉 한번 렌더링이 시작되면 중단 없이 끝까지 실행되어야했습니다. 결과적으로 렌더링이 길어지면 에니메이션이 끊기고 사용자 입력이 무시되며 전체 앱이 멈춘듯한 느낌이 들었습니다. 그렇기때문에 React 팀은 다음과 같은 목표를 가지고 Fiber를 설계했습니다. Fi..

그럼 "버튼을 눌러 다크모드를 토글하는 컴포넌트" 같이 한번 간단하게 구현해볼게요.(React + TailwindCSS 기준으로 짜드릴게요.) "라이트모드, 다크모드 같은 토글뿐만 아니라 시스템 설정을 따라가게 할 수도 있는 거 알고 계신가요?" 전체 흐름은localStorage에 사용자가 선택한 테마가 있는지 확인 → 있으면 그걸 적용없으면 시스템 설정을 따라감 (matchMedia)사용자가 토글하면 localStorage 업데이트 "CSS 선택자를 사용해서 다크 테마를 적용합니다." "중요한 점은, 태그에 있는 dark 클래스를 동적으로 변경한다는 것입니다. (하위 소스코드 참고)" 그럼 "버튼을 눌러 다크모드를 토글하는 컴포넌트" 같이 한번 간단하게 구현해볼게요.(NextJs+ Tailwi..

브라우저 렌더링 이해하면 성능 최적화의 길이 보인다. 브라우저 렌더링 과정을 알면 웹 페이지 성능을 최적화하고, 디버깅을 쉽게 하며, 웹 애플리케이션의 사용자 경험을 개선하는 데 중요한 정보를 얻을 수 있습니다. 우선 간략하게 5가지로 나누어본후 상세로 설명하겠습니다.1. 성능 최적화렌더링 과정 최적화: 페이지가 어떻게 렌더링되는지 이해하면 페이지 로딩 속도를 빠르게 하거나, 불필요한 리소스를 줄이는 방법을 알 수 있습니다. 예를 들어, 이미지나 스크립트가 렌더링 성능에 미치는 영향을 파악하고, 이를 최적화할 수 있습니다.렌더링 차단 요소 분석: 자바스크립트나 CSS가 페이지 렌더링을 차단하는 방식에 대해 알면, 페이지 로딩을 더 빠르게 할 수 있는 방법(예: 비동기 로딩, CSS 최적화 등)을 찾을 수..

컴포넌트를 분리하던중 깨닳은것을 적고자한다import React from "react";import Pagenation from "../common/Pagenation";import SearchBox from "../common/SearchBox";import heart from "../../images/icon/heart.svg";import "./../css/ProductList.css";import { Link } from "react-router-dom";const Product = ({ productLists }) => { return ( {productLists?.map((data) => ( ..