Component & Rendering

컴포넌트란

리액트의 핵심 빌딩 블록 중 하나로, UI 요소를 표현하는 최소한의 단위이며

화면의 특정 부분이 어떻게 생길지 정하는 선언체.

 

DOM (명령형 프로그래밍)

명령형으로 작성된 코드의 경우 Hello, World! 를 출력하기 위해 컴퓨터가 수행하는

절차를 일일히 코드로 작성해주어야 한다.

 

리액트 (선언형 프로그래밍)

UI를 선언하고 render 함수를 호출하면 React가 알아서 절차를 수행.

화면에 어떻게 그려야할지는 React 내부에 잘 숨겨져 추상화되어 있음.

// React 코드 (선언적인)
const header = <h1>Hello World</h1>; // jsx
ReactDOM.render(header, document.getElementById('root'));

 

---

렌더링이란?

컴포넌트가 현재 props와 state의 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업