티스토리챌린지

리액트의 렌더링 과정은 크게 두가지로 `render phase`와 `commit phase`로 나뉜다.  1. render phase`render phase`는 리액트가 변화된 상태(state)나 props에 따라 어떤 UI가 변경되어야 할지 결정하는 단계입니다. 이 과정에서는 실제로 DOM을 업데이트하지 않고, 새로운 가상 DOM을 생성하여 기존 가상 DOM과 변경사항을 계산하고 비교합니다. 이 단계는 순수하게 계산하는 과정이기 때문에 성능에 영향을 주지 않도록 중단되거나 다시 실행될 수 있으며, `React 18`에서 도입된 `Concurrent Mode`를 사용해 비동기적으로 처리될 수도 있습니다.2. commit phase`commit phase`는 실제로 변화된 UI를 실제 DOM에 반영하는 단..

import React from 'react'import ReactDOM from 'react-dom/client'import App from './App.tsx'import './index.css'ReactDOM.createRoot(document.getElementById('root')!).render( )리액트에서 `StrictMode`라는 키워드를 자주 접해본 적이 있다. 주로 개발 중에 발생할 수 있는 잠재적인 문제를 사전에 감지하고 예방하기 위해 사용합니다.목적1. 오래된 라이프사이클 메서드와 비권장 API 사용을 감지합니다.`componentWillMount`, `componentWillUnmount`와 같은 메서드는 더 이상 사용이 권장되지 않는데, StrictM..

더보기답변 초안www.google.com을 입력하면 DNS 서버에서 해당 주소를 검색해 IP 주소로 변환합니다. IP 주소로 변환해 TCP 연결을 설정합니다. 3way handshake를 통해 송신자(서버)와 수신자(브라우저)의 연결을 확인하고 서버로부터 데이터를 전달받습니다. 전달받은 데이터를 브라우저 렌더링 파이프라인을 통해 화면에 그려냅니다.DNS 조회TCP 연결 수립HTTP 요청서버의 응답브라우저 렌더링 파이프라인 진행 1. DNS 조회사용자가 "www.google.com"을 입력하면, 브라우저는 도메인 이름을 IP 주소로 변환해야 합니다. 브라우저는 캐시된 DNS 기록을 먼저 확인하고, 없으면 로컬 DNS 서버에 요청하여 "www.google.com"에 해당하는 IP 주소를 얻습니다. 2. TC..

브라우저가 웹 페이지를 화면에 표시하기 위해 거치는 과정을 `브라우저 렌더링 파이프라인`이라고 합니다. 브라우저 렌더링 파이프라인은 5단계로 구성됩니다.DOM 생성CSSOM 생성렌더 트리 생성레이아웃페인팅컴포지팅1. DOM 생성브라우저가 HTML 파일을 받으면, 이 파일을 바이트(byte) 단위로 읽기 시작합니다. 브라우저의 HTML 파서(Parser)는 이 바이트들을 문자로 변환하고, 이 문자들을 HTML 토큰으로 변환합니다. 이 HTML 토큰들은 각각의 태그와 그 안에 포함된 텍스트, 속성 등을 의미하게 됩니다.HTML을 생성하게 되면, 브라우저는 이를 기반으로 `DOM 트리`를 생성합니다. DOM 트리는 HTML 문서의 구조를 트리 형태로 표현한 것으로, 각 태그가 노드(node)가 되어 `부모 -..

제어문조건에 따라 코드 블록을 실행(`조건문`), 반복 실행(`반복문`)할 때 사용한다. 제어문을 사용해 코드의 실행 흐름을 인위적으로 제어할 수 있다. 블록문블록문은 0개 이상의 문을 중괄호(`{}`)로 묶은 것으로 코드 블록 또는 블록이라고 부른다.자바스크립트에서 블록문은 하나의 실행 단위로 취급한다.문의 끝에는 세미콜론(`;`)을 붙이지만 블록문은 자체 종결성을 갖고 있기 때문에 세미콜론을 붙이지 않는다.// 블록문{ var foo = 10;}// 제어문var x = 1;if (x  조건문조건문은 주어진 조건식의 평가 결과에 따라 코드 블록(블록문)의 실행을 결정한다. 조건식은 불리언 값으로 평가될 수 있는 표현식이다.if 문의 조건식이 불리언 값이 아닌 값으로 평가되면 자바스크립트 엔진에 의해 ..

메모이제이션(Memoization)리액트를 성능 최적화하는 방법에는 대표적으로 `메모이제이션`을 말할 수 있습니다.리액트의 `memo`를 사용하여 컴포넌트를 메모이제이션 할 수 있습니다. 이는 컴포넌트의 props가 변경되지 않았을 때, 리렌더링을 방지하여 성능을 최적화 합니다. 특히, 렌더링 비용이 큰 컴포넌트에서 유용합니다.import React, { memo } from 'react';const MyExpensiveComponent = memo(({ data }) => { // 복잡한 연산이나 많은 DOM 조작이 필요한 컴포넌트 console.log('Expensive component rendered'); return ( {data.map(item => ( {it..

제어 컴포넌트(Controlled Component)는 리액트 상태(state)를 이용해 입력값을 제어하는 컴포넌트를 말합니다.입력 요소의 값(value)를 리액트의 상태와 동기화하고, 사용자가 입력을 변경하면 onChange 이벤트 핸들러를 통해 이벤트를 감지해 setter 함수로 state를 업데이트합니다. (useState Hooks)제어 컴포넌트의 장점은 입력값과 UI가 항상 일치하도록 유지하여 데이터 관리를 용이하게 하고, 입력 값을 유효성을 검사하고, 복잡한 폼을 효과적으로 관리할 수 있습니다.import React, { useState } from 'react';function ControlledInput() { const [value, setValue] = useState(''); co..