React 컴포넌트 생성과 구조

⚛️ 컴포넌트 생성과 구조

React에서 UI를 구성하는 핵심 단위는 컴포넌트(Component)입니다.
컴포넌트를 활용하면 UI를 재사용 가능한 조각으로 나누어 효율적인 개발이 가능합니다.

1. 함수형 컴포넌트 (Function Component)

React 16.8 이후 Hooks의 등장으로 함수형 컴포넌트가 주로 사용됩니다.

function Hello(props) {
  return <h1>Hello, {props.name}!</h1>;
}
  

ES6 화살표 함수로도 작성할 수 있습니다:

const Hello = (props) => <h1>Hello, {props.name}!</h1>;
  

2. 클래스형 컴포넌트 (Class Component)

Hooks 이전에는 클래스형 컴포넌트가 주로 사용되었습니다.

import React, { Component } from 'react';

class Hello extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}
  

3. 컴포넌트 이름 규칙

• 반드시 대문자로 시작해야 React가 컴포넌트로 인식합니다.
• <hello />는 HTML 태그로 인식되며, <Hello />는 React 컴포넌트로 처리됩니다.

4. JSX에서 컴포넌트 사용하기

function App() {
  return (
    <div>
      <Hello name="React" />
      <Hello name="World" />
    </div>
  );
}
  

5. props (속성)

컴포넌트는 props를 통해 데이터를 전달받습니다. props는 읽기 전용이며 부모 컴포넌트 → 자식 컴포넌트로 흐릅니다.

function Welcome(props) {
  return <h2>Welcome, {props.user}!</h2>;
}

<Welcome user="Alice" />
  

✅ 요약

• React는 UI를 컴포넌트 단위로 나눠서 개발
• 함수형 컴포넌트가 주로 사용됨 (Hooks 지원)
• 컴포넌트 이름은 대문자로 시작
• props로 데이터 전달 가능
• JSX 문법을 사용해 컴포넌트를 구성