[ReactJS] Props 이해하기, 사용하기

props 개념이해

props는 prop이 여러개인것을 의미한다. 프롭은 property를 줄여서 쓴 것인데 '속성'이라는 뜻을 가지고 있다. 여기서의 속성은 컴포넌트의 속성을 의미한다.

 

React의 props(properties)는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법이다. props를 사용하면 컴포넌트 간 재사용성과 유연성을 높일 수 있다. 또한 props는 읽기 전용(immutable) 이므로 자식 컴포넌트에서 직접 변경할 수 없다. props는 오직 부모에서 자식에게만 전달되며 객체 형태로 전달된다. (단방향 데이터 흐름)

 

[ props의 특징] 
- 읽기 전용 : read-only 읽을 수만 있고 값을 변경할 수 없다.
- 단방향 데이터 흐름 : 부모에서 자식에게만 전달된다.
- 구조 분해 할당을 활용하면 코드가 간결해진다.
- defaultProps와 prop-types로 기본값과 타입을 검증할 수 있다.
- 함수 전달 가능
- props.children을 사용해 UI를 감쌀 수 있다.

 

 

---

 

 

props 사용법

먼저 부모 컴포넌트에서 props를 전달한다. 아래의 예시는 자식 컴포넌트에 name과 age라는 props를 전달하는 코드이다.

function Parent() {
  return <Child name="React" age={5} />;
}

 

 

그 다음 자식 컴포넌트에서 props를 받는다.

function Child(props) {
  return (
    <div>
      <h1>이름: {props.name}</h1>
      <p>나이: {props.age}살</p>
    </div>
  );
}

 

 

구조 분해 할당(Destructuring)props를 쉽게 사용하기 위해 구조 분해 할당을 활용할 수 있다. 아래의 코드를 보면 props.name → name, props.age → age로 짧게 작성이 가능하다.

function Child({ name, age }) {
  return (
    <div>
      <h1>이름: {name}</h1>
      <p>나이: {age}살</p>
    </div>
  );
}

 

 

Props의 기본값 (defaultProps)

만약 부모 컴포넌트에서 props를 전달하지 않았을 경우 기본값을 설정할 수 있다.

function Child({ name = "기본 이름", age = 0 }) {
  return (
    <div>
      <h1>이름: {name}</h1>
      <p>나이: {age}살</p>
    </div>
  );
}

 

 

또는 defaultProps를 사용할 수도 있다.

Child.defaultProps = {
  name: "기본 이름",
  age: 0,
};

 

 

Props 타입 검증 (prop-types)

prop-types 패키지를 사용하면 props의 타입을 검사할 수 있다. 터미널에서 prop-types를 설치한다.

npm install prop-types

 

 

isRequired를 사용하면 필수 props임을 지정할 수 있다.

import PropTypes from "prop-types";

function Child({ name, age }) {
  return (
    <div>
      <h1>이름: {name}</h1>
      <p>나이: {age}살</p>
    </div>
  );
}

Child.propTypes = {
  name: PropTypes.string.isRequired, // name은 필수이며 문자열 타입이어야 함
  age: PropTypes.number, // age는 숫자 타입
};

 

 

Props로 함수 전달 (이벤트 핸들링)

부모가 자식에게 함수를 전달할 수도 있다.

(1) 부모에서 함수 전달

onClick 함수를 자식 컴포넌트에게 props로 전달한다.

function Parent() {
  const handleClick = () => {
    alert("버튼이 클릭됨!");
  };

  return <Child onClick={handleClick} />;
}

(2) 자식에서 함수 실행

onClick 함수가 props로 전달되고, 자식 컴포넌트에서 실행된다.

function Child({ onClick }) {
  return <button onClick={onClick}>클릭</button>;
}

 

Props를 활용한 동적 UI

props를 사용하면 여러 개의 데이터를 활용한 동적 UI를 만들 수 있다. 아래의 코드는 map()을 사용하여 여러 개의 UserProfile 컴포넌트를 동적으로 렌더링할 수  있도록 만든 예시이다.

function UserProfile({ name, avatar }) {
  return (
    <div>
      <img src={avatar} alt={`${name}의 프로필`} />
      <h2>{name}</h2>
    </div>
  );
}

function App() {
  const users = [
    { id: 1, name: "Alice", avatar: "alice.jpg" },
    { id: 2, name: "Bob", avatar: "bob.jpg" },
  ];

  return (
    <div>
      {users.map((user) => (
        <UserProfile key={user.id} name={user.name} avatar={user.avatar} />
      ))}
    </div>
  );
}

Children Props

props.children을 사용하면 컴포넌트 사이에 자식을 넣을 수 있습니다. 아래의 코드는 Wrapper 컴포넌트가 children을 받아서 감싸는 역할을 하는 예시이다.

function Wrapper({ children }) {
  return <div className="wrapper">{children}</div>;
}

function App() {
  return (
    <Wrapper>
      <h1>안녕하세요</h1>
      <p>이것은 children입니다.</p>
    </Wrapper>
  );
}