React 교재 · 입문 3편

React 첫 컴포넌트 — 함수형 컴포넌트

1편에서 봤던 "UI 는 함수" 가 이번 편에서 실체. 5줄 함수로 첫 컴포넌트 만들기.

코드 에디터 위에 떠 있는 UI 컴포넌트 카드 일러스트 — 함수형 컴포넌트 컨셉

2편에서 Vite 로 만든 프로젝트의 App.tsx 가 사실 첫 컴포넌트였다. 보고 지나갔을 뿐. 이번 3편에서 그 함수가 정확히 어떻게 동작하는지, 새 컴포넌트를 어떻게 추가하는지, 그리고 React 가 강제하는 2개의 이름 규칙까지 본다.

함수형 컴포넌트는 React 의 가장 작은 단위. 이걸 정확히 이해하지 못하면 props·state·hook 다 모래성. 5줄 코드부터 시작.

1. 컴포넌트 = JSX 를 반환하는 함수

React 의 컴포넌트는 JSX 를 반환하는 JavaScript 함수. 그게 전부. 가장 짧은 형태:

function Greeting() {
  return <h1>안녕, React!</h1>;
}

이게 컴포넌트다. function + return + JSX. 클래스도 this 도 extends 도 없다. 한때는 클래스 컴포넌트가 표준이었지만 2020 년 이후 함수형 + Hooks 가 사실상 단일 표준. 신규 코드에 클래스 쓰면 면접에서 의아한 눈빛 받는다.

2. 호출 방법 — 함수가 아니라 JSX 태그로

일반 JavaScript 함수는 Greeting() 으로 호출. React 컴포넌트는 JSX 태그 로 호출한다.

// ❌ React 에선 이렇게 안 함
const ui = Greeting();

// ✅ JSX 태그로 호출
function App() {
  return (
    <div>
      <Greeting />
      <Greeting />
    </div>
  );
}

이 표기가 처음엔 어색하지만 의미가 크다. React 가 "<Greeting /> 위치에 Greeting 컴포넌트를 마운트" 라는 명령으로 해석. 같은 컴포넌트를 여러 번 박아도 각각 독립 인스턴스로 동작.

핵심 차이 — Greeting() 은 그냥 함수 호출 (한 번 평가하고 끝). <Greeting /> 은 React 가 관리하는 컴포넌트 인스턴스 (state·effect·재렌더 추적). React Hooks 가 함수 안에서 작동하려면 후자 방식이 필수.

3. 두 가지 이름 규칙 — 어기면 작동 안 함

React 가 코드 형태로 강제하는 이름 규칙 둘. 어기면 에러가 안 나도 화면이 비어 보이는 함정.

규칙 1 — 컴포넌트 이름은 대문자 시작

JSX 파서는 대문자로 시작하면 컴포넌트, 소문자면 HTML 태그로 해석한다.

function greeting() {       // ❌ 소문자 시작
  return <h1>안녕</h1>;
}
// <greeting /> 사용 시 React 는 "greeting 이라는 HTML 태그" 로 해석
// 브라우저가 모르는 태그 → 화면에 아무것도 안 보임 (에러도 없음)

function Greeting() {       // ✅ 대문자 시작
  return <h1>안녕</h1>;
}
// <Greeting /> → 컴포넌트로 정상 마운트

규칙 2 — 파일·컴포넌트 이름 일치 (관례)

강제는 아니지만 React 생태계 표준 관례. Greeting 컴포넌트는 Greeting.tsx 파일에. 안 지키면 import 할 때 헷갈리고 IDE 자동완성도 어긋난다. 한 파일에 컴포넌트 여러 개 둘 땐 가장 중심 컴포넌트 이름을 파일명으로.

4. 파일 분리 — 첫 모듈 import·export

실제 작업 흐름. src/components/Greeting.tsx 파일을 새로 만든다:

// src/components/Greeting.tsx
export function Greeting() {
  return <h1>안녕, React!</h1>;
}

App.tsx 에서 가져와 사용:

// src/App.tsx
import { Greeting } from './components/Greeting';

function App() {
  return (
    <div>
      <Greeting />
    </div>
  );
}
export default App;

두 가지 패턴 — named export (export function Greeting) 와 default export (export default Greeting). 둘 다 가능하지만 named 가 권장 — IDE 자동 import·rename refactor·tree shaking 모두 우위. default 는 한 파일에 컴포넌트 1개 + 외부 라이브러리 호환 정도.

흔한 첫 실수 — import 경로에 .tsx 확장자 적기 (Vite/TS 는 자동 해석). 또는 import 했는데 사용 안 함 → 빌드는 통과해도 번들에 들어감 → eslint 가 잡아준다. 처음엔 에디터 빨간 줄을 무시 말 것.

이번 3편으로 "컴포넌트 만들기 + 호출 + 분리" 의 사이클이 완성. 4편에서는 JSX 의 진짜 문법 (중괄호 표현식·className·이벤트·Fragment) 으로 들어간다.

React 교재 4편 — JSX 문법 정복. HTML 과 다른 5가지, 중괄호 표현식, Fragment, 이벤트 핸들러까지.