지금까지는 실제 예제를 통해 리액트 코드를 작성하며 스파르타식으로 리액트를 배워봤는데요, 이번 챕터에서는 조금 더 추상적인 개념들을 소개해드리고자 합니다.

1. Component

컴포넌트는 리액트의 핵심 빌딩 블록 중 하나입니다. 즉 리액트에서 개발할 모든 애플리케이션은 컴포넌트라는 조각으로 구성되죠. 컴포넌트는 UI 구축 작업을 훨씬 쉽게 만들어줍니다. 그렇지만 우리 모두, 리액트 이전에 프론트엔드 개발 환경을 경험하시지 못했다면 무엇이 불편했고 리액트와 같은 컴포넌트 기반의 UI 라이브러리가 무엇을 편하게 해주는지 모르실 거에요.

시작하면서 얘기드렸듯, 컴포넌트란 리액트의 핵심 빌딩 블록 중 하나로, UI 요소를 표현하는 최소한의 단위이며 화면의 특정 부분이 어떻게 생길지 정하는 선언체입니다. 말이 조금 어려운데, 이전 실습에서 경험했듯이 컴포넌트를 생성하고 보여지고자 하는 UI 요소를 컴포넌트 내부에서 JSX를 통해 선언하면 이를 리액트가 화면에 그려주었죠. 리액트 컴포넌트가 선언체라는 개념은 아주 중요합니다.

그 이유는 리액트의 컴포넌트기반 개발 이전에는 브라우저에서 동적으로 변하는 UI를 표현하기 위해 직접 DOM 객체를 조작하는 명령형 프로그래밍 방식으로 구현했습니다. 그렇다면 기존 명령형 프로그래밍과 리액트 컴포넌트의 선언적 프로그래밍은 어떻게 다를까요?

<aside> 💡 **명령형은 어떻게(How)**를 중요시여겨서 프로그램의 제어의 흐름과 같은 방법을 제시하고 목표를 명시하지 않는 형태입니다. **선언형은 무엇(What)**을 중요시 여겨서 제어의 흐름보다는 원하는 목적을 중요시 여기는 형태입니다.

</aside>

헷갈리시죠..? 아래 예시 코드를 통해 알아보죠.

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);

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

리액트 코드는 어떤가요? React 코드의 경우 내가 UI을 선언하고 render 함수를 호출하면 React가 알아서 절차를 수행해 화면에 출력해주죠. 즉, 화면에 어떻게 그려야할지는 React 내부에 잘 숨겨져 추상화되어 있습니다.

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

DOM을 직접 조작하여 명령형 프로그래밍 방식으로 작성하던 코드가 나쁘다는게 아닙니다. 카운터 예시와 같이 격리된 예제에서는 차라리 리액트와 같은 UI 라이브러리를 사용하지 않고 만드는게 더 빠르고 전체적인 번들 사이즈 측면에서도 더 효율적인 방법일수 있습니다. 그치만 더 복잡한 UI 시스템에서는 관리하기가 기하급수적으로 어려워집니다.