Component

컴포넌트는 리액트의 핵심 빌등 블록 중 하나이다. 리액트에서 개발할 모든 애플리케이션은 컴포넌트라는 조각으로 구성된다. 컴포넌트는 UI 구축 작업을 훨씬 쉽게 만들어준다.

컴포넌트란 리액트의 핵심 빌딩 블록중 하나로, UI 요소를 표현하는 최소한의 단위이며 화면의 특정 부분이 어떻게 생길지 정하는 선언체이다. 컴포넌트를 생성하고 보여지고자 하는 UI요소를 컴포넌트 내부에서 JSX를 통해 선언하면 이를 리액트가 화면에 그려준다. 리액트 컴포넌트가 선천체라라는 개념은 아주 중요하다.

리액트의 컴포넌트기반 개발 이전에는 브라우저에서 동적으로 변하는 UI를 표현하기 위해 직접 DOM 객체를 조작하는 명령형 프로그래밍 방식으로 구현했다.

DOM(명령형 프로그래밍)

명령형으로 작성된 코드의 경우 Hello, World!를 출력하기 위해 컴퓨터가 수행하는 절차를 하나하나 코드로 작성해 주어야 한다.

// Hello, World! 화면에 출력하기
// 순수 javaScript 명령형 코드
const root = document.getElementById('root'); 
const header = document.createElement('h1'); 
const headerContent = document.createTextNode(
	'Hello, World!'
);

header.appendChild(headerContent); 
root.appendChild(header);

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

리액트 경우 UI를 선언하고 Render 함수를 호출하면 리액트가 알아서 절차를 수행해 화면에 출력한다. 즉, 화면에 어떻게 그려야할지는 리액트 내부에 추상화되어있다.

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

DOM을 직접 조작하여 명령형 프로그래밍 방식으로 작성하던 코드가 나쁘다는게 아니다. 더 복잡한 UI 시스템에서 좀 더 유지보수 측면에서 편리하기 때문에 선언형 프로그래밍을 선호하게된다.