React - Component

컴포넌트란?

React에서 컴포넌트는 UI를 구성하는 가장 작은 단위다. HTML 태그처럼 생겼지만, 실상은 JavaScript(또는 TypeScript) 함수다. 이 함수는 특정 UI 조각을 반환하며, 상황에 따라 다르게 렌더링될 수 있다.

컴포넌트는 일반적으로 **대문자(UpperCamelCase)**로 이름을 작성해야 한다. 이는 일반 함수와 구분하기 위한 약속이며, JSX 문법 내에서 대문자로 시작하는 요소는 React 컴포넌트로 인식된다.

function Welcome() {
  return <h1>Hello, React!</h1>;
}

 

함수형 컴포넌트 vs 클래스형 컴포넌트

과거에는 클래스형 컴포넌트를 통해 상태 관리와 라이프사이클 메서드를 다뤘지만, 현재는 함수형 컴포넌트 + Hook 조합이 주류다.

• 함수형 컴포넌트는 작성이 간결하고 직관적이다.
• useState, useEffect와 같은 Hook을 사용하여 상태 관리와 사이드 이펙트를 처리할 수 있다.

함수형 컴포넌트 예제: 카운터 만들기

아래는 useState Hook을 사용해 카운트를 증가/감소하는 간단한 예제다.

이 컴포넌트는 useState를 활용하여 count를 선언하고 두개의 버튼을 통해 값을 조작한다. 이벤트 속성인 onClick는 JSX 문법에 따라 lowerCamelCase로 작성한다.

import React, { useState } from 'react';

function B_React_Counter() {
  const [count, setCount] = useState<number>(0);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <p>VS 타입스크립트(카운터 예제)</p>
      <p>Count: {count}</p>
      <button onClick={increment}>증가</button>
      <button onClick={decrement}>감소</button>
    </div>
  );
}

export default B_React_Counter;

 

컴포넌트 가져오기와 내보내기

컴포넌트를 다른 파일에서 사용하려면 반드시 export를 해야 하며, 가져올 때는 import를 사용한다. 두 가지 방식이 있다:

• export: 이름 그대로 가져와야 함 (컴포넌트명 변경 불가)
• export default: 가져올 때 원하는 이름으로 변경 가능

// Img.tsx
export function Img() {
  return <img src="/dog.jpg" alt="강아지" width={300} />;
}

// C_Component.tsx
import { Img } from './Img';

function C_Component() {
  return (
    <div>
      <p>컴포넌트의 시작</p>
      <Img />
    </div>
  );
}

또한 Vite 환경에서는 절대 경로(@/경로)를 설정해서 보다 깔끔하게 import할 수 있다. 이 경우 vite.config.ts와 tsconfig.json에 경로를 지정해줘야 한다.

 

JSX 문법 간단 정리

JSX는 JavaScript 안에서 HTML처럼 마크업을 작성할 수 있게 해주는 문법이다. 다만 다음과 같은 규칙이 존재한다:

• HTML 태그는 소문자로, 컴포넌트는 대문자로 시작
• 이벤트 핸들러는 카멜 케이스로 (onClick, onChange 등)
• JSX 내에서는 JavaScript 표현식을 중괄호 {} 안에 작성

정리

React에서의 함수형 컴포넌트는 가장 핵심적인 구조다. useState를 비롯한 Hook을 통해 상태 관리를 쉽게 할 수 있으며, 컴포넌트를 나누어 관리하면 유지보수도 편해진다. 아래와 같은 내용을 숙지하면 React 프로젝트를 시작하는 데 훨씬 수월할 것이다.

• 함수형 컴포넌트로 UI 구성
• Hook으로 상태 및 사이드 이펙트 관리
• JSX 문법과 컴포넌트 사용 규칙
• 컴포넌트의 모듈화 및 재사용성