요소
반응하다 코어 블록 다음 중 하나로 React에서 개발할 각 응용 프로그램은 구성 요소의 일부입니다.
그것은 구성
App이라는 컴포넌트 아래에는 다양한 하위 컴포넌트가 존재하며, 컴포넌트는 부모-자식 관계에서 state 형태로 props로 전파됩니다.
구성 요소는 UI 구조를 훨씬 쉽게 만듭니다.
UI 요소를 표현하는 최소 단위이며 화면의 특정 부분이 어떻게 보일지 결정하는 선언입니다.
React는 컴포넌트를 생성하고 컴포넌트 내에서 JSX를 통해 표시할 UI 요소를 선언하면서 화면에 그림을 그립니다.
그래서 선언문이라고 합니다.
React의 컴포넌트 기반 개발 이전에는 DOM 객체를 직접 조작하여 사용자 인터페이스를 표현했습니다.
명령형 – 어떻게중요하다고 생각하는 프로그램 제어 흐름 및 목표와 같은 방법을 소개합니다.
나타내다
선언적 – 무엇통제의 흐름보다는 목적에 집중모양
즉, 과거에는 명령형이었습니다.
DOM(명령형 프로그래밍)
출력은 컴퓨터가 수행하는 절차를 코드로 작성해야 합니다.
React(선언적 프로그래밍)
내가 UI를 선언하고 렌더링 함수를 호출하면 React가 이를 처리하여 화면에 렌더링합니다.
(화면에 어떻게 그릴 내용은 React에서 잘 숨겨져 있고 추상화되어 있습니다.
)
DOM의 코드가 나쁘다는 것이 아닙니다.
이러한 방식으로 프로그래밍하면 코드가 길어지고 사용자 인터페이스를 유지 관리하기 어렵습니다.
반면 React는 관리가 효율적이고 코드가 직관적이고 좋습니다.
세우다
요소 소품 레벨 및 상태에 따라 구성 요소에 사용자 인터페이스 구성 방법을 묻는 작업
(데이터를 기반으로 화면을 구성하는 방법)
렌더링 프로세스
공제 – 렌더링 완료 (주문 후 주방으로 배송)
렌더링은 다음과 같은 경우에 발생합니다.
- 첫 번째 React 앱을 실행할 때
- 현재 React 내에서 상태 변경이 일이 일어났을 때
- 구성 요소의 내부 상태가 변경될 때
- 컴포넌트에 새로운 props가 들어왔을 때(자식 컴포넌트의 값이 변경되었을 때?)
- 위의 두 가지 이유로 상위 구성 요소에서 렌더링이 발생합니다.
React 앱이 처음 실행되고 렌더링될 때 React는 구성 요소의 루트에서 시작하여 DOM 요소의 구성 요소에서 반환된 JSX 출력을 반영하여 끝까지 검색합니다.
다시 렌더링 – 첫 번째 렌더링 후 추가 상태 변경이 발생할 때 발생합니다.
여러 상태가 변경되면 React는 상태를 대기열 데이터 구조에 넣어 순서를 관리합니다.
리렌더링 시 React는 변경된 내용을 컴포넌트에 전달하고, 컴포넌트는 새로운 변경 사항을 기반으로 새로운 UI를 생성합니다.
새로 생성된 렌더링 결과가 DOM에 표시됩니다!
브라우저 렌더링 – 브라우저 렌더링과 React 렌더링은 완전히 독립적인 프로세스입니다.
렌더링이 완료되고 React가 DOM을 업데이트하면 브라우저가 화면을 그립니다.
이 프로세스를 “브라우저 렌더링”이라고 하지만 혼동을 피하기 위해 “페인팅”이라고 합니다.
브라우저 렌더링에 대한 참고 사항 https://d2.naver.com/helloworld/59361