[리액트 딥 다이브] 03-1 리액트의 모든 훅 파헤치기

🚀 리액트의 모든 훅 파헤치기1️⃣ useStateuseEffect와 함께 상태 관리를 할 수 있게 해주는 훅.기본 사용법import { useState } from "react";const [state, setState] = useState(initValue);아무런 값도 넘겨주지 않으면 초깃값은 undefined 이다.리액트의 렌더링은 함수 컴포넌트에서 반환한 결과물인 return의 값을 비교해 실행되기 때문에 다음과 같은 상황에서는 렌더링이 되지 않는다.function Component() { const [_, triggerRender] = useState(); let state = "hello"; function handleButtonClick() { state = "hi"; t..

• format_list_bulleted 개발관련/리액트 딥 다이브
• · 2024. 5. 16.
• textsms

[리액트 딥 다이브] 02-5-컴포넌트와-함수의-무거운-연산을-기억해-두는-메모이제이션

리액트에서 제공하는 API 중 useMemo, useCallback 훅과 고차 컴포넌트인 memo를 사용해 리엑트에서의 렌더링을 최소한으로 줄일 수 있다. 이러한 렌더링 최적화 기법을 메모이제이션 기법이라고 한다. → 렌더링 비용과 메모이제이션 비용 중 어떤 게 더 비싼가라는 질문이 등장 일부 컴포넌트에서는 메모이제이션을 하는 것이 성능에 도움이 된다. 우리는 두 가지 선택권이 있다. memo를 컴포넌트의 사용에 따라 잘 살펴보고 일부에만 적용하는 방법 memo를 일단 다 적용하는 방법 1️⃣ 섣부른 최적화는 독이다. 필요한 곳에서만 메모이제이션 하자. 이상적인 상황이다. 메모이제이션 역시 어디까지나 비용이 발생하는 작업이다. 따라서 최적화가 필요한 곳에서만 사용해야 한다. 값을 비교하고 렌더링 또는 재..

• format_list_bulleted 개발관련/리액트 딥 다이브
• · 2024. 4. 23.
• textsms

[리액트 딥 다이브] 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