React Components, Props, and JSX: A Beginner's Guide

컴포넌트란 무엇인가

React에서 컴포넌트는 UI를 구성하는 독립적인 조각이다. 레고 블록이라고 생각하면 쉽다. 버튼 하나, 헤더 하나, 카드 하나가 각각 컴포넌트가 될 수 있고, 이 블록들을 조합해서 전체 페이지를 만든다.

2026년 기준으로 함수형 컴포넌트가 사실상 유일한 표준이다. React 19 정식 버전이 자리 잡으면서 클래스 컴포넌트는 오래된 레거시 프로젝트에서만 볼 수 있고, 새로 시작하는 프로젝트라면 함수형으로 작성하는 것이 당연하게 여겨진다. 함수 하나가 곧 컴포넌트이고, 그 함수가 반환하는 것이 화면에 보이는 UI다.

function Welcome() {
    return <h1>안녕하세요</h1>;
}

이게 전부다. 함수 이름이 컴포넌트 이름이 되고, return 뒤에 오는 JSX가 화면에 렌더링된다. 함수 이름은 반드시 대문자로 시작해야 한다. React가 HTML 태그와 커스텀 컴포넌트를 구분하는 기준이기 때문이다.

JSX, HTML처럼 생긴 JavaScript

JSX는 JavaScript 안에서 HTML 같은 문법을 쓸 수 있게 해주는 확장 문법이다. 브라우저가 직접 이해하는 건 아니고, Babel이나 Vite 같은 빌드 도구가 일반 JavaScript로 변환해준다. 참고로 React 17부터 도입된 새 JSX 변환(automatic runtime) 덕분에, 요즘은 JSX만 쓰는 파일이라면 굳이 import React from 'react'를 맨 위에 적지 않아도 된다.

// JSX 방식
const element = <h1 className="title">Hello</h1>;

// 새 JSX 변환이 만들어내는 코드(개념적으로)
import { jsx as _jsx } from 'react/jsx-runtime';
const element = _jsx('h1', { className: 'title', children: 'Hello' });

JSX를 쓰면 UI 구조를 직관적으로 파악할 수 있다. 다만 몇 가지 HTML과 다른 점이 있다.

Props로 데이터 전달하기

Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법이다. HTML 속성처럼 생겼지만, 값으로 문자열뿐만 아니라 숫자, 배열, 객체, 심지어 함수까지 넘길 수 있다.

// 부모 컴포넌트
function App() {
    return <UserCard name="junetapa" role="developer" />;
}

// 자식 컴포넌트
function UserCard(props) {
    return (
        <div>
            <h2>{props.name}</h2>
            <p>{props.role}</p>
        </div>
    );
}

구조 분해 할당(destructuring)을 쓰면 더 깔끔하다. 실무에서는 거의 대부분 이 방식을 사용한다.

function UserCard({ name, role }) {
    return (
        <div>
            <h2>{name}</h2>
            <p>{role}</p>
        </div>
    );
}

Props의 핵심 규칙: 읽기 전용

Props는 부모가 넘겨준 데이터이므로 자식 컴포넌트에서 절대 수정하면 안 된다. 이 규칙은 React의 단방향 데이터 흐름을 유지하는 핵심 원칙이다. 데이터를 변경해야 한다면 State를 사용해야 한다.

ref도 이제 그냥 prop이다 (React 19)

예전에는 자식 컴포넌트에 DOM 참조(ref)를 넘기려면 forwardRef로 컴포넌트를 감싸야 했다. React 19부터는 ref를 다른 props와 똑같이 받아 쓸 수 있게 바뀌었다. 입문 단계에서 당장 쓸 일은 적지만, 오래된 예제에서 forwardRef가 보인다면 "지금은 굳이 안 써도 되는 옛 방식"이라고 이해하면 된다.

function MyInput({ placeholder, ref }) {
    return <input placeholder={placeholder} ref={ref} />;
}

컴포넌트 조합 패턴

React의 진짜 강점은 작은 컴포넌트를 조합해서 복잡한 UI를 만드는 데 있다. 아래 예시처럼 카드 하나를 만들고, 그 카드를 리스트로 반복하는 구조가 가장 기본적인 패턴이다.

function PostCard({ title, description }) {
    return (
        <div className="card">
            <h3>{title}</h3>
            <p>{description}</p>
        </div>
    );
}

function PostList() {
    const posts = [
        { id: 1, title: 'React 입문', description: '컴포넌트 기초' },
        { id: 2, title: 'Props 이해', description: '데이터 전달법' },
    ];

    return (
        <div>
            {posts.map(post =>
                <PostCard key={post.id} title={post.title} description={post.description} />
            )}
        </div>
    );
}

초보자가 자주 하는 실수

컴포넌트 이름을 소문자로 쓰는 경우

<userCard />처럼 소문자로 시작하면 React가 HTML 태그로 인식한다. 항상 대문자로 시작해야 한다.

Props를 직접 수정하는 경우

props.name = "new"처럼 Props를 직접 바꾸면 예측 불가능한 버그가 생긴다. Props는 읽기 전용이라는 규칙을 반드시 지켜야 한다.

return에서 여러 요소를 반환하는 경우

JSX에서 여러 요소를 반환하려면 하나의 부모 요소로 감싸야 한다. 불필요한 <div>를 추가하고 싶지 않다면 <Fragment> 또는 빈 태그 <></>를 사용하면 된다.

function Profile() {
    return (
        <>
            <h1>이름</h1>
            <p>소개</p>
        </>
    );
}

마무리

React의 컴포넌트, Props, JSX는 단순하지만 이 세 가지가 React 전체 구조의 토대다. 컴포넌트로 UI를 쪼개고, Props로 데이터를 흘려보내고, JSX로 선언적 UI를 작성한다. 이 흐름을 체득하면 이후에 State, Hooks, 상태 관리 라이브러리를 배울 때도 훨씬 수월해진다.

여기까지 익혔다면 다음 단계로 React 19에서 강화된 기능들을 천천히 살펴봐도 좋다. 폼 처리와 비동기 동작을 묶어주는 Actions와 useActionState, Promise를 렌더링 흐름에 자연스럽게 끼워 넣는 use() 훅, 그리고 서버에서 실행되어 클라이언트 번들을 가볍게 만드는 서버 컴포넌트(RSC)가 대표적이다. 다만 이들은 기초가 잡힌 뒤에 접근하는 것이 좋고, 상태 관리는 2026년 현재 Zustand, 서버 데이터는 TanStack Query가 사실상 표준처럼 쓰인다는 점만 기억해 두자.

개념만 읽는 것보다 직접 간단한 컴포넌트를 만들어보는 게 가장 빠르다. 버튼 하나, 카드 하나부터 시작해보자.