[React] Components와 Props 개념 정리

이번에는 리액트의 핵심 개념 중 하나인 컴포넌트(Components) 와 프롭스(Props) 에 대해서 정리해보았다. 실제 리액트 프로젝트에서 UI를 구성할 때 가장 많이 사용하는 구조이기 때문에, 이 부분을 정확하게 이해하는 것이 중요하다.

---

Components와 Props의 정의

Component(컴포넌트) 는 리액트에서 UI를 구성하는 최소 단위이며, 재사용 가능한 자바스크립트 함수이다. 간단히 말하면, 특정 기능이나 UI를 담당하는 코드 블록이라고 생각하면 된다.

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

위 예시처럼 함수형 컴포넌트를 선언하고, 특정 데이터를 넘겨받아 UI를 출력할 수 있다.

Props(프롭스) 는 컴포넌트 간 데이터를 전달할 때 사용하는 값이다. 부모 컴포넌트가 자식 컴포넌트에게 값을 넘겨줄 때 사용하는 방식이며, 읽기 전용(immutable)이다.

---

Props의 특징 및 사용법

1. 읽기 전용: Props는 컴포넌트 내부에서 변경할 수 없다. 값을 변경하고 싶다면 상위 컴포넌트에서 상태(state)를 바꾸어야 한다.
2. 객체 형태로 전달: Props는 객체 형태로 전달되며, key-value 쌍으로 구성된다.
3. 컴포넌트 재사용성 향상: 컴포넌트에 다른 props를 넘겨줌으로써 다양한 UI를 재사용할 수 있다.

예시

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

const element = <Welcome name="Markus" />;
ReactDOM.render(element, document.getElementById('root'));

---

Component 만들기 및 렌더링

컴포넌트는 함수형(function component) 혹은 클래스형(class component)으로 만들 수 있다. 최근에는 함수형 컴포넌트와 훅(Hooks)을 사용하는 방식이 주로 사용된다.

함수형 컴포넌트 예시

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

렌더링 예시

const element = <Hello name="React" />;
ReactDOM.render(element, document.getElementById('root'));

하나의 컴포넌트가 여러 컴포넌트를 렌더링하는 구조도 가능하다.

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

ReactDOM.render(<App />, document.getElementById('root'));

---

Component 합성과 추출

컴포넌트 합성은 여러 개의 컴포넌트를 조합하여 하나의 UI를 구성하는 방식이다. 큰 컴포넌트를 여러 개의 작은 컴포넌트로 나누면 유지보수와 재사용성이 높아진다.

function Avatar(props) {
  return <img src={props.user.avatarUrl} alt={props.user.name} />;
}

function UserInfo(props) {
  return (
    <div>
      <Avatar user={props.user} />
      <div>{props.user.name}</div>
    </div>
  );
}

function Comment(props) {
  return (
    <div>
      <UserInfo user={props.author} />
      <div>{props.text}</div>
    </div>
  );
}

컴포넌트 추출은 하나의 컴포넌트 안에 여러 역할이 섞여 있을 때, 역할별로 분리해서 작은 컴포넌트로 나누는 것이다. UI 구조가 복잡해질수록 추출을 잘해두는 것이 가독성과 유지보수에 매우 중요하다.