React 컴포넌트 분리와 Props 사용법 알아보기

React 개발에서 가장 기본이 되는 컴포넌트 분리와 props 사용법에 대해 알아보겠습니다.
React는 UI를 컴포넌트 단위로 쪼개서 개발하는 구조인데요, 이 구조를 이해하면 유지보수나 재사용성이 매우 좋아집니다.

---

컴포넌트란?

컴포넌트(Component)는 React에서 UI를 구성하는 기본 단위입니다.
하나의 컴포넌트는 함수처럼 만들 수 있고, 원하는 데이터를 props로 전달해 재사용할 수 있습니다.

간단한 컴포넌트 예제:

function Welcome() {
  return <h1>안녕하세요!</h1>;
}

이 컴포넌트를 App에서 다음과 같이 사용할 수 있습니다:

function App() {
  return (
    <div>
      <Welcome />
    </div>
  );
}

---

컴포넌트 분리

하나의 파일에서 모든 코드를 작성하기보다는, 역할별로 파일을 나눠 작성하는 것이 좋습니다.

예:

1. App.js – 전체 레이아웃을 구성
2. Header.js – 헤더 컴포넌트
3. Footer.js – 푸터 컴포넌트

// Header.js
function Header() {
  return <h1>My Website</h1>;
}
export default Header;

// App.js
import Header from './Header';

function App() {
  return (
    <div>
      <Header />
    </div>
  );
}

이렇게 파일을 나누면 컴포넌트 재사용이나 관리가 쉬워집니다.

---

Props란?

Props(properties)는 컴포넌트에 값을 전달하기 위한 방법입니다.
부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용합니다.

Props 예제:

// Greeting.js
function Greeting(props) {
  return <p>안녕하세요, {props.name}님!</p>;
}
export default Greeting;

// App.js
import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Greeting name="홍길동" />
      <Greeting name="이순신" />
    </div>
  );
}

Greeting 컴포넌트는 name이라는 props를 받아서 사용자에게 인사합니다.
이렇게 하면 하나의 컴포넌트를 다양한 데이터로 재사용할 수 있습니다.

---

함수형 컴포넌트에서 props 구조 분해 사용

props를 구조 분해 문법으로 더 간단하게 쓸 수 있습니다:

function Greeting({ name }) {
  return <p>안녕하세요, {name}님!</p>;
}

이렇게 하면 코드가 훨씬 간결하고 가독성이 좋아집니다.

---

마무리

React에서 컴포넌트를 나누고 props를 사용하는 방법은 UI를 효율적으로 구성하는 핵심 개념입니다.
작은 단위로 쪼개고 데이터를 전달하는 방식에 익숙해지면 프로젝트가 훨씬 관리하기 쉬워질 거예요.