컴포넌트

 

React 컴포넌트 개념 정리

1. 컴포넌트란?

React에서 컴포넌트는 UI를 독립적으로 구성하고 재사용 가능한 단위입니다.
화면을 여러 컴포넌트로 나누어 개발하며, 각 컴포넌트는 함수(function) 또는 클래스(class) 로 정의됩니다.

---

2. 컴포넌트의 종류

종류 설명

함수형 컴포넌트 (Function Component)	현재 가장 일반적으로 사용하는 방식
클래스형 컴포넌트 (Class Component)	React 16 이전에 주로 사용되던 방식, 이제는 거의 사용하지 않음

---

3. 기본 사용 예시

함수형 컴포넌트

// Hello.tsx
type Props = {
  name: string;
}

function Hello({ name }: Props) {
  return <h1>안녕하세요, {name}님</h1>;
}

export default Hello;

App.tsx에서 사용

import Hello from './Hello';

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

export default App;

---

4. props (속성)

• 부모 컴포넌트가 자식 컴포넌트에게 값을 전달할 때 사용하는 입력값
• 읽기 전용이며, 자식은 수정할 수 없음

function Hello(props: { name: string }) {
  return <h1>{props.name}</h1>;
}

---

5. state (상태)

• 컴포넌트 내부에서 관리하는 동적인 데이터
• useState 훅을 사용해 정의

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 값: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

---

6. 재사용성

컴포넌트는 한 번 만들면 다양한 곳에서 재사용할 수 있습니다.
동일한 구조를 가지되, 전달받는 props 값에 따라 다르게 동작하게 만들 수 있습니다.

---

요약

개념	설명
컴포넌트	화면을 구성하는 최소 단위
props	부모 → 자식으로 전달하는 값
state	컴포넌트 내부에서 관리하는 데이터
함수형 컴포넌트	현재 React의 표준 방식
재사용성	동일 컴포넌트를 다양한 상황에 맞게 반복 사용 가능

 

React는 컴포넌트를 기반으로 화면을 나누고, 각 컴포넌트가 입력(props)과 내부 상태(state)를 통해 변화하는 방식으로 작동합니다. 이 구조에 익숙해지는 것이 React의 핵심입니다.