React 입문: JSX, 렌더링, 컴포넌트와 Props

React란?

React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리다. 컴포넌트 기반으로 UI를 구성하며 Virtual DOM을 통해 효율적으로 화면을 업데이트한다. "선언적(Declarative)" 방식으로 UI를 작성한다는 것이 핵심이다.

JSX (JavaScript XML)

JSX는 JavaScript 안에서 HTML과 유사한 마크업을 작성할 수 있게 해주는 문법 확장이다. 브라우저가 직접 이해하지는 못하고 Babel 같은 트랜스파일러가 React.createElement() 호출로 변환한다.

주의할 점이 있다. class 대신 className을 사용하고 모든 태그는 반드시 닫아야 한다. 또한 JSX 내에서 JavaScript 표현식은 중괄호 {}로 감싸서 사용한다.

Rendering Elements

Element는 React 앱의 가장 작은 단위이고ReactDOM.render() (또는 React 18의 createRoot)를 통해 DOM에 렌더링된다. React Element는 불변 객체이기 때문에 UI를 업데이트하려면 새로운 Element를 생성해서 전달해야 한다.

Components and Props

UI를 재사용 가능한 독립적인 조각으로 나눈 것이 컴포넌트다. 함수형 컴포넌트와 클래스형 컴포넌트가 있는데 현재는 함수형 컴포넌트가 표준이다.

Props는 부모 컴포넌트가 자식에게 전달하는 데이터다. Props는 읽기 전용(Read-only)이라는 중요한 규칙이 있다. 컴포넌트는 자신의 Props를 직접 수정해서는 안 된다.

State and Lifecycle

State는 컴포넌트 내부에서 관리하는 데이터로 Props와 달리 컴포넌트 스스로 변경할 수 있다. State가 변경되면 React는 해당 컴포넌트를 다시 렌더링한다.

Lifecycle은 컴포넌트가 생성(mount)되고, 업데이트되고, 제거(unmount)되는 과정이다. 함수형 컴포넌트에서는 useEffect Hook으로 라이프사이클을 다룬다.

정리하며

React의 기본 구성 요소를 한번에 훑어봤다. JSX가 처음엔 어색했는데, "HTML처럼 생긴 JavaScript"라고 생각하니 금방 익숙해졌다. 컴포넌트 분리와 Props/State의 차이를 이해하는 것이 React의 첫걸음인 것 같다.