[리액트 딥 다이브] 02-4-렌더링은-어떻게-일어나는가

리액트의 렌더링은 브라우저가 렌더링에 필요한 DOM 트리를 만드는 과정을 의미한다. 이 렌더링 과정은 시간과 리소스를 소비해 수행하는 과정이다. 이 비용은 모두 웹 애플리케이션을 방문하는 사용자에게 청구되며, 시간이 길고 복잡해질 수록 사용성을 저해한다. 때문에 개발자는 렌더링 과정을 최소한으로 줄이기 위하여 렌더링 과정을 잘 숙지하고 있어야 한다. 1️⃣ 리액트의 렌더링이란? 브라우저에서도 사용되는 용어이므로 두 가지를 혼동해서 사용해선 안된다. 리액트에서의 렌더링이란 리액트 애플리케이션 트리 안에 있는 모든 컴포넌트들이 현재 자신들이 가지고 있는 props와 state의 값을 기반으로 어떻게 UI를 구성하고, 이를 바탕으로 어떤 DOM 결과를 브라우저에 제공할 것인지 계산하는 일련의 과정을 의미한다...

• format_list_bulleted 기술 서적/리액트 딥 다이브
• · 2024. 4. 23.
• textsms

[리액트 딥 다이브] 02-3-클래스형-컴포넌트와-함수형-컴포넌트

1️⃣ 클래스 컴포넌트 import React from "react"; class SampleComponent extends React.Component { render() { return Sample Component; } } 오래된 코드의 유지보수, 오래된 라이브러리를 사용할 때 도움을 얻기 위해서 기본적인 클래스 컴포넌트의 이해가 필요하다. 다음과 같은 클래스를 상속받아 컴포넌트를 만들 수 있다. React.Component React.PureComponent 이 둘의 차이점은 shouldComponentUpdate 를 다루는 데 있다. import React from 'react'; //Prop 타입 정의 interface SampleProps { required?: boolean; text: s..

• format_list_bulleted 기술 서적/리액트 딥 다이브
• · 2024. 4. 21.
• textsms

[리액트 딥 다이브]02-2 가상 DOM과 리액트 파이버

🚀 가상 DOM과 리액트 파이버 리액트의 특징은 바로 가상DOM이다. 이 가상DOM이 왜 만들어졌는지, 실제 DOM과 어떤 차이가 있는지 알아보도록 하자. 1️⃣ DOM과 브라우저 렌더링 과정 브라우저는 Navigation과정을 통해 주소에 해당하는 서버에 HTML파일을 요청하고 다운로드 한다. 브라우저의 렌더링 엔진에 의해 DOM과 CSSOM이 만들어지고, 자바스크립트 엔진을 통해 AST가 만들어진다. AST는 DOM과 CSSOM에 적용되고, 이 DOM과 CSSOM은 결합하여 RenderTree가 만들어진다. 브라우저의 렌더링 엔진에 의해 레이아웃과 페인트 과정을 통해서 픽셀 단위로 화면에 뿌려지게 된다. 2️⃣ 가상 DOM의 탄생 배경 브라우저가 웹페이지를 렌더링하는 과정은 매우 복잡하고 많은 비용이..

• format_list_bulleted 기술 서적/리액트 딥 다이브
• · 2024. 4. 20.
• textsms

[모던 리액트 Deep Dive] 02-1 JSX란 무엇인가?

JSX란 무엇인가? 리액트의 등장과 함께 메타에서 선보인 구문이지만, 반드시 리액트에서 사용하리란 법은 없다. xml과 유사한 내장형 구문이다. ECMA 자바스크립트 표준은 아니다. 즉 V8이나 Deno와 같은 JS엔진에서 실행되거나 표현된다면 에러가 발생한다 따라서 JSX는 반드시 트랜스파일러를 거처야 비로소 JS엔진이 이해할 수 있는 언어가 된다. 1️⃣ JSX의 정의 JSXElement JSXOpeningElement : JSXClosingElement : JSXSelfClosingElement : JSXFragment : → 요소의 이름은 대문자로 시작해야한다. 이는 JSXElement의 표준은 아니다. html태그명과 구분하기 위한 React의 규칙이다. JSXElementName JSXIden..

• format_list_bulleted 기술 서적/리액트 딥 다이브
• · 2024. 4. 20.
• textsms

React에서의 MSW 기본 사용법

❤️‍🔥MSW 소개 MSW(mocking service worker)는 API를 mocking할 수 있는 라이브러리 입니다. mocking의 장점 테스트 코드의 의존성을 덜어내 독립적인 테스트 코드를 작성할 수 있습니다. 실제 응답을 기다리지 않기 때문에, 속도 측면에서 비용절감이 될 수 있습니다. ❗️MSW를 React에서 사용해보자. 우선 msw를 설치해줍니다. npm install msw@latest --save-dev 그 다음 msw를 실행해줍시다. npx msw init public/ --save "msw": { "workerDirectory": [ "public" ] } 이 결과로 package.json에 다음과 같은 스크립트가 추가됩니다. 세팅이 완료되었습니다. 이제 mocking 모듈을 만..

• format_list_bulleted Front End/React
• · 2024. 4. 14.
• textsms

옵저버 패턴(Observer Pattern)과 React Query

우아한 테크코스 Level1을 하면서, 바닐라 JS에 대한 이해도가 조금 생긴 것 같다. 이 과정에서 웹을 구성하는 핵심이 무엇일까?, 바닐라JS로 웹을 구현하는데 핵심이 무엇일까? 생각해 보았을때, 나는 ‘비동기로 실행되는 이벤트’라고 생각했다. 즉, 상태가 계속해서 변할 때 이벤트를 어떻게 효율적으로 실행하는가? 이다. 리액트에서는 useEffect 와 useState 와 더불어, Redux React Query등을 사용하며, ‘상태를 감지하는 시스템’을 통해 간편하게 관리를 하지만, 바닐라에서는 어떻게 구현하면 좋을까? 생각을 많이 했다. 그 중에서 눈에 띄었던 기능은 ‘웹 컴포넌트’에서의 observedAttributes 메서드, 그리고 Mutation Observer를 통해서 DOM에 있는 요소..

• format_list_bulleted Front End/React
• · 2024. 4. 8.
• textsms