리액트 API중 useMemo, useCallback훅, 고차 컴포넌트인 memo는리액트에서 발생하는 렌더링을 최소한으로 줄이기 위해서 제공된다. 두 훅에 대해서는 이전 공식문서를 공부한 자료를 첨부한다.useMemohttps://geyun105.tistory.com/entry/React-%EA%B3%B5%EC%8B%9D-%EB%AC%B8%EC%84%9C-useMemouseCallbackhttps://geyun105.tistory.com/entry/React-%EA%B3%B5%EC%8B%9D-%EB%AC%B8%EC%84%9C-useCallback?category=1237514  메모이제이션 최적화에 대한 두가지 주장을 비교해보았다. 공통 전제 : 일부 컴포넌트에서는 메모이제이션을 하는 것이 성능에 도움이..

[리액트의 렌더링]리액트 애플리케이션 트리 안에 있는 모든 컴포넌트들이 현재 자신들이 가지고 있는 props와 state의 값을 기반으로 어떻게 UI를 구성하고 이를 바탕으로 어떤 DOM 결과를 브라우저에 제공할 것인지 계산하는 일련의 과정 [리액트의 렌더링이 일어나는 경우]1. 최초 렌더링  : 사용자가 처음 애플리케이션에 진입했을 때, 리액트가 브라우저에 정보를 제공하기 위해 최초 렌더링 수행2. 리렌더링  : 최초 렌더링이 발생한 이후 발생하는 모든렌더링클래스 컴포넌트의 setState가 실행되는 경우 : state의 변화는 컴포넌트 상태의 변화를 의미한다. 클래스 컴포넌트에서는 state의 변화를 setState 호출을 통해 수행하므로 리렌더링이 발생한다.클래스 컴포넌트의 forceUpdate가 ..

[클래스 컴포넌트]기본적인 형식import React from 'react'class Sample extends React.Component{ render(){ return Sample Component }} 클래스 컴포넌트를 만드려면 클래스를 선언하고, extends로 만들고 싶은 컴포넌트를 extends해야한다. extends에 넣을 수 있는 클래스React.componentReact.PureComponentprops, state, 메서드 정의import React from 'react'// props 타입을 선언한다.interface SampleProps { required?: boolean text: string}// state 타입을 선언한다.interface SampleState..

[DOM]DOM (Document Object Model): 웹 문서의 구조화된 표현으로,   웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고있다.  렌더링 트리를 생성하려면 브라우저가 대략적으로 다음 작업을 수행한다.DOM 트리의 루트에서 시작하여 표시되는 노드 각각을 트래버스합니다.일부 노드는 표시되지 않으며(예: 스크립트 태그, 메타 태그 등), 렌더링된 출력에 반영되지 않으므로 생략됩니다.일부 노드는 CSS를 사용하여 숨겨지며 렌더링 트리에서도 생략됩니다. 예를 들어 위의 예에서 스팬 노드는 'display: none'을 설정하는 명시적 규칙이 있기 때문에 렌더링 트리에서 누락됩니다. 속성을 사용할 수 있습니다.표시된 각 노드에 대해 일치하는 ..

[JSX란]XML 과 유사한 내장형 구문이며, 리액트에 종속적이지 않은 독자적인 문법이다.- JSX는 자바스크립트 표준 코드가 아닌 페이스북이 임의로 만든 새로운 문법이기 때문에  반드시 트랜스파일러를 거쳐야 JS 런타임이 이해하는 JS 코드로 변환된다. [JSX의 구성]JSXElement: JSX를 구성하는 가장 기본 요소로, HTML 요소와 비슷한 역할을 한다.JSXOpeningElementJSXCLosingElementJSXSelfClosingElementJSXFragment  JSXElementName  : JSXElement의 요소 이름으로 쓸 수 있는 것을 의미한다.JSXIdetifierJSXNamespaceNameJSXMemberExpressionJSXAttributes: JSXElement..