리액트(React)에서 컴포넌트(Component)는 UI를 구성하는 가장 기본적이고 독립적인 빌딩 블록입니다. 쉽게 말해 레고 블록을 조립하여 하나의 멋진 완성품을 만들 듯, 여러 개의 컴포넌트를 결합하여 복잡한 사용자 인터페이스를 만듭니다.

컴포넌트의 장점

• 재사용성 (Reusability): 한 번 만들어 둔 컴포넌트는 다른 화면이나 프로젝트에서 쉽게 다시 사용할 수 있습니다.
• 유지보수성 (Maintainability): 코드가 독립적으로 분리되어 있어 특정 부분에 문제가 생겼을 때 해당 컴포넌트만 수정하면 됩니다.
• 가독성 (Readability): 복잡한 HTML 구조를 의미 있는 이름(예: <Header />, <UserProfile />)으로 추상화할 수 있습니다.

리액트(React) 생태계는 시간이 지남에 따라 크게 진화해 왔으며, 그 중심에는 클래스(Class) 컴포넌트에서 함수(Function) 컴포넌트로의 패러다임 전환이 있습니다.

과거의 주류: 클래스 컴포넌트

초기 리액트에서는 상태(State)를 가지거나 생명주기(Lifecycle) 메서드(예: componentDidMount)를 사용하려면 반드시 ES6의 class 문법을 사용해야 했습니다.

• 장점: 생명주기 메서드가 명확하게 구분되어 있어 직관적입니다.
• 단점: this 바인딩 규칙이 복잡하고 코드가 길어집니다. 로직을 재사용하기 어렵습니다(HOC, Render Props 등의 패턴 강제).

모던 리액트의 표준: 함수 컴포넌트와 Hooks

리액트 16.8 버전에서 Hooks(useState, useEffect 등)가 도입되면서, 함수 컴포넌트에서도 상태 관리와 생명주기 제어가 가능해졌습니다.

• 장점: 코드가 간결하고 읽기 쉽습니다. this를 신경 쓸 필요가 없으며, Custom Hook을 통해 로직 재사용이 매우 쉽습니다.
• 현재 상태: 리액트 공식 문서와 최신 생태계는 함수 컴포넌트를 표준으로 채택하고 있으며, 새로운 코드는 모두 함수형으로 작성하는 것을 강력히 권장합니다.

요약: 왜 함수 컴포넌트를 쓰나요?

과거 유지보수 프로젝트가 아니라면, 무조건 함수 컴포넌트와 Hooks를 사용하는 것이 최선의 선택입니다. 클래스 컴포넌트는 레거시 시스템을 이해하기 위한 배경지식으로만 알아두셔도 충분합니다.

JSX 문법의 핵심 규칙

JSX는 JavaScript 내에서 HTML과 유사한 마크업을 작성할 수 있게 해주는 문법 확장입니다.

• 반드시 하나의 부모 요소로 감싸야 합니다: 형제 노드들을 나열할 때는 <div>나 <> ... </> (Fragment)로 묶어줍니다.
• 자바스크립트 표현식은 중괄호 {}를 사용합니다: 변수나 함수 실행 결과를 화면에 출력할 때 사용합니다.
• class 대신 className을 사용합니다: JavaScript의 예약어인 class와 겹치지 않기 위함입니다.
• 태그는 반드시 닫아야 합니다: <img />, <br /> 처럼 빈 태그도 꼭 닫아주어야 합니다.

// 리액트 컴포넌트는 대문자로 시작하는 자바스크립트 함수입니다.
export default function App() {
  // JSX를 사용하여 화면에 보여줄 HTML을 반환(return)합니다.
  return (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      <h1 style={{ color: '#61DAFB' }}>Hello, World!</h1>
      <p>나의 첫 번째 리액트 컴포넌트입니다.</p>
    </div>
  );
}