react8 [ React ] 리액트의 Render에 대하여:: Virtual DOM과 리렌더링 Recat의 렌더링 과정 1. 데이터 변경 감지 Data Change (State/Props) React는 상태(State)와 속성(Props)를 모니터링해 데이터의 변경을 감지한다. 상태가 변경되거나 부모 컴포넌트로부터 새로운 속성을 받았을 때, React는 컴포넌트를 리렌더링해야 할 필요가 있는지 확인한다. 2. 가상 DOM 생성 Createing Virtual DOM 데이터 변경이 감지되면, React는 가상 DOM을 생성한다. ***가상 DOM ( Virtual DOM ) 메모리 상에 존재하는 가벼운 복사본으로 실제 DOM과 유사한 계층 구조를 갖는다. 가상DOM은 실제 DOM과 동기화 되지 않고 독립적으로 존재한다. 3.가상 DOM 비교하기 Comparing Virtual DOM 이전에 생성된 .. 2023. 8. 5. [ React ] HTML 같기도 하지만 JSX라고 합니다. JSX란 무엇인가? JSX란 무엇인가요? JavaScript XML의 약자로 JavaScript와 XML(또는 HTML)을 조합한 문법. JSX란 자바스크립트 표현식을 확장한 문법으로 리액트에서 컴포넌트의 UI를 표현하는데 사용한다. HTML과 유사한 형태지만 자바스크립트로 컴파일되어 가상 DOM을 생성하는 데 쓰인다. JSX는 어떻게 쓸까요? JSX는 자바스크립트 코드 안에서 중괄호 {}로 감싸서 사용한다. import React from 'react'; function Introduce(props) { return Hi, my name is {props.name}!; } const element = ; 이를 통해 리액트 컴포넌트에서 동적인 값을 쉽게 출력하고 조절할 수 있다. JSX의 원리 JSX는 바벨(Babel)과 .. 2023. 8. 5. 이전 1 2 다음
