Element
엘리먼트(Element)는 React 애플리케이션을 구성하는 블록이다. React 앱의 가장 작은 단위로, 화면에 표시할 내용(UI)을 기술한다.
엘리먼트는 불변 객체로, 생성된 후에는 자식이나 속성을 변경할 수 없다. 업데이트가 필요할 땐 새로운 엘리먼트를 생성하고 ReactDOM에 전달한다.
아래 코드는 JavaScript로 작성되었으며, createElement를 사용해 <h1 class="greeting">안녕하세요!</h1>라는 엘리먼트를 생성한다.
// javascript
const element = React.createElement(
'h1',
{className: 'greeting'},
'안녕하세요!'
);아래 코드도 위와 동일한 작업을 수행한다. JSX는 JavaScript를 확장한 문법으로, JSX를 사용하면 HTML과 유사한 문법으로 UI를 표현할 수 있다.
//jsx
const element = <h1 className="greeting">안녕하세요!</h1>;Component
컴포넌트(Component)는 페이지에 렌더링할 엘리먼트를 반환하는 독립적이고 재사용 가능한 코드 조각이다.
JavaScript로 정의되며, 각 컴포넌트는 자신의 상태(state)와 속성(props)을 관리하고 이를 바탕으로 UI를 렌더링한다. 컴포넌트는 다른 컴포넌트를 포함할 수 있어 복잡한 UI를 계층 구조로 구성할 수 있다.
다음은 함수형 컴포넌트의 예시이다.
function Greeting(props) {
return <h1>안녕하세요, {props.name}!</h1>;
}엘리먼트와 컴포넌트를 혼동하기 쉽다. 엘리먼트가 UI의 무엇을 렌더링할지를 정의한다면, 컴포넌트는 UI를 어떻게 렌더링할지를 정의한다.
엘리먼트는 UI의 구조를 설명하고, 컴포넌트는 이러한 엘리먼트를 생성하고 조합하는 단위이다. 컴포넌트를 이용하면 더 복잡하고 상호작용적인 UI를 구축할 수 있게 된다.
props
속성(property, props)은 컴포넌트로 전달되는 데이터를 의미한다. 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달할 때 사용한다.
읽기 전용으로, 컴포넌트 내에서 직접 변경할 수 없다.
function Welcome(props) {
return <h1>안녕하세요, {props.name}님!</h1>;
}
const element = <Welcome name="사용자" />;
state
상태(state)는 컴포넌트가 관리하는 데이터를 의미한다. 동적인 데이터를 관리하기 위해 사용한다.
state는 컴포넌트 내부에서 선언되며, 컴포넌트의 상태(ex. 사용자 입력, 서버 응답 등)에 따라 번경될 수 있다. 외부에서 직접 접근하거나 변경할 수는 없다. state가 변경되면 컴포넌트는 자동으로 다시 리렌더링된다.
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>현재 카운트: {count}</p>
<button onClick={() => setCount(count + 1)}>증가</button>
</div>
);
}
event
이벤트(event)는 사용자와의 상호작용을 관리한다. React의 이벤트 시스템은 기본적인 웹 브라우저의 이벤트와 비슷하지만, React 자체 처리 시스템을 통해 브라우저 간의 일관된 이벤트 처리를 보장하고 성능을 최적화하고 있다.
React는 이벤트 핸들러 이름으로 캐멀 케이스를 사용하며(ex. onClick), 문자열이 아닌 함수 형태로 전달된다.
