리액트 심화 스터디 (15) 썸네일형 리스트형 [Week 4] Compound Component Pattern, HOC, React Portal 1. Compound Component PatternCompound Component Pattern은 여러 개의 하위 컴포넌트들이 하나의 상위 컴포넌트 내에서 작동하도록 설계하는 방식이다.이 패턴은 하나의 컴포넌트를 여러 하위 컴포넌트들의 조합으로 분리하여 재사용성을 높인다. Compound Component Pattern 예시1) Header.jsx (최상위 컴포넌트)import React from 'react';const Header = ({ children, ...props }) => { return 모달이 렌더링 될 위치에 div 엘리먼트를 추가해준다.2) ModalPortal.jsximport ReactDom from "react-dom";const ModalPortal.. 🏄♀️ 리심스 3주차 - 리액트 렌더링 최적화 리액트는 성능 최적화를 위한 다양한 기능과 도구를 제공한다. 성능 최적화는 곧 불필요한 렌더링을 최소화하는 것으로, 이번 아티클에서는 렌더링 횟수를 줄이고 불필요한 메모리 사용을 줄이는 것에 초점을 맞추어 어떻게 애플리케이션의 성능을 높일 수 있는지 알아볼 것이다. 시작 전에, 먼저 리액트에서 리렌더링이 일어나는 조건은 아래와 같다.해당 컴포넌트의 state가 변경될 때해당 컴포넌트가 받는 props의 값이 변경되었을 때해당 컴포넌트의 부모 컴포넌트가 리렌더링되었을 때 1. Automatic batching (setState의 비동기 동작)💡 batching이란?React가 더 나은 성능을 위해 여러 개의 state 업데이트를 하나의 리렌더링 (re-render)로 묶는 것React 개발자는 성능 최.. [Week 3] Automatic batching, windowing, useMemo, useCallback 1. Automatic batchingBatching (일괄 처리)리액트는 동일한 이벤트 핸들러 내에서 발생하는 state 업데이트를 묶어 한 번의 리렌더링만 발생시킨다.이러한 방식으로 불필요한 렌더링을 줄이는 것을 Batching(일괄 처리)이라고 한다. React 17에서의 BatchingReact 18 이전까지, 리액트는 이벤트 핸들러 내부에서 발생하는 업데이트에만 배칭을 적용했다.따라서, Promise나 setTimeout 같은 비동기 작업 내부에서 발생하는 업데이트는 배칭되지 않아,setState 함수가 호출될 때마다 각각 리렌더링이 발생했다. function handleClick() { fetchSomething().then(() => { setCount((c) => c + 1); .. 🏄♀️ 리심스 2주차 - 리액트 렌더링 리액트의 렌더링 프로세스리액트의 렌더링은 브라우저에 필요한 DOM 트리를 만드는 과정을 의미한다. 리엑트는 이 렌더링 작업을 위한 자체적인 렌더링 프로세스가 있다.1. 렌더링 트리거컴포넌트의 렌더링이 일어나는 이유1. 초기렌더링 - createRoot의 실행- 대상 DOM 노드와 함께 createRoot를 호출한 다음 해당 컴포넌트로 render 메소드 호출 2. 리렌더링 - 상태 업데이트- 렌더링된 이후 set함수를 통해 state를 변화시켜 추가적인 렌더링을 유발- props가 변경되는 경우- 컴포넌트의 Key props가 변경되는 경우컴포넌트의 상태를 업데이트하면 자동으로 렌더링 대기열에 추가state update -> triggers -> render 2. Render와 Commit (Rende.. [Week 2] 리액트 렌더링 프로세스, React fiber 1. 리액트 렌더링 프로세스렌더링 프로세스 리액트의 렌더링 과정은 두 가지 단계로 나뉜다.1. Render phase렌더 단계에는 구성 요소를 렌더링하고 변경 사항을 계산하는 모든 작업이 포함된다.실제 DOM을 조작하지 않고 실제 DOM을 모방한 가상의 DOM을 생성한다.이를 통해 리액트는 새로운 가상 DOM과 원래의 DOM를 비교하여 효율적인 렌더링을 수행한다.2. Commit phase커밋 단계에서는 변경 사항이 실제 DOM에 적용된다.리액트는 현재와 이전 가상 DOM 트리 간의 차이를 기반으로 UI를 업데이트한다. 컴포넌트 업데이트 및 리렌더링1단계: 렌더링 트리거컴포넌트는 다음과 같은 상황에서 렌더링이 발생한다.- 컴포넌트의 초기 렌더링사용자가 처음 어플리케이션에 진입했을때 보여야 할 화면을 위해.. 🏄♀️리심스 1주차 - 리액트 상태, 리렌더링 안녕하세요, 리심스 1주차 아티클 작성하러 온 김한서입니다. 💥 Virtual DOM리액트에서는 렌더링시 가상 DOM을 이용한다. 가상 DOM이란, 실제 DOM을 조작하는 방식이 아닌, 실제 DOM을 모방한 가상의 DOM을 구성해 원래 DOM과 비교하여 달라진 부분을 리렌더링하는 방식으로 작동한다. 이 때 가상 DOM을 잘 이해해야만 리액트의 상태에 대해 잘 이해하고 다룰 수 있다.더보기DOM(Document Object Model) 이란? 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다.밑의 그림처럼, HTML과 스크립팅언어(Javascript)를 서로 이어주는 역할을 한다고 할 수 있다.지난 2주차 과제에서 모두 경험해봤듯이, 자바스크립트.. [Week 1] snap state, Context, Virtual Dom, Reconciliation 1. snap statesetState 함수를 이용하여 상태를 업데이트하면 현재의 상태를 즉시 변경시키지 않고 리렌더링을 일으킨다.즉, 현재 시점의 값을 변경시키는 것이 아니라 다음 리렌더링에서 반영해야 하는 상태를 전달하는 것이다.예시를 들어 설명하면 쉽다.import { useState } from 'react';export default function Counter() { const [number, setNumber] = useState(0); return ( {number} { setNumber(number + 1); setNumber(number + 1); setNumber(number + 1); }}>+3 .. 이전 1 2 다음
