⚡리액트 핵심요소 깊게 살펴보기 - 2.4 렌더링은 어떻게 일어나는가?리액트의 렌더링은 브라우저가 렌더링에 필요한 DOM트리를 만드는 과정이고, 렌더링은 시간과 리소스를 소비해 수행되는 과정이므로 렌더링 과정을 최소한으로 줄이는게 좋음2.4.1 리액트의 렌더링이란?리액트 애플리케이션 트리 안에 있는 모든 컴포넌트들이 현재 자신들이 가지고 있는 props와 state값을 기반으로 어떻게 UI를 구성하고 이를 바탕하고 어떤 DOM 결과를 브라우저에 제공할 것인지 계산하는 일련의 과정 2.4.2 리액트의 렌더링이 일어나는 이유🌚리액트에서 렌더링이 발생하는 시나리오1. 최초렌더링 : 사용자가 처음 애플리케이션을 진입하면 렌더링해야 할 결과물이 필요한데, 리액트는 브라우저에 해당 정보를 제공하기 위해 최초렌더링..

⚡리액트 핵심 요소 깊게 살펴보기 - 2.3 클래스형 컴포넌트와 함수형 컴포넌트2.3.1 클래스형 컴포넌트 클래스형 컴포넌트를 생성하기 위해서는 클래스를 선언하고 extends로 만들고 싶은 컴포넌트를 extends해야함💡extends 구문에 넣을 수 있는 클래스React.ComponentReact.PureComponent※ 위의 클래스의 차이점은 shouldComponentUpdate를 사용함에 있음🌕 컴포넌트를 생성할때 주로 쓰이는 것 : props, stateimport React from 'react'// props 타입을 선언한다.interface SampleProps { required?: boolean text: string}// state 타입을 선언한다.interface S..

📂 React 설치하는 방법1.Node.js LTS 버전이나 최신 안정 버전을 내려받아 설치하기https://nodejs.org/ko/download Node.js — Node.js® 다운로드Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.nodejs.org2. Visual Studio Code 설치https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, WindowsVisual Stu..