[React] Props의 개념과 활용 살펴보기!!!

React란 스택을 배우고 공부하면서 마주치지 않을 수가 없는 개념이 있다.

바로 Props이다. 필자는 이 Props에 대해 복잡하게는 아니더라도 이게 무엇인지에 대한 개념정리를 해보려고 한다.

Props가 뭘까?

Props는 React에서 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법이다.

Properties의 줄임말로, 컴포넌트 간의 통신을 가능하게 하는 핵심적인 메커니즘이기 때문에 너무 중요한 개념이라고 볼 수 있다.

기본 개념
Props는 읽기 전용(read-only)이며, 자식 컴포넌트에서 직접 수정할 수 없다.
이는 React의 단방향 데이터 흐름 원칙을 따르는 것으로, 데이터의 흐름을 예측 가능하게 만드는 장점이 있다.

 

예시 코드를 잠시 살펴보겠다.

// 부모 컴포넌트
function ParentComponent() {
  return <ChildComponent name="React" />;
}

위 코드에서 name은 props의 이름이며, "React"는 전달하는 값이다.

// 자식 컴포넌트
function ChildComponent(props) {
  return <h1>Hello, {props.name}!</h1>;
}

자식 컴포넌트는 props 객체를 통해 전달받은 값에 접근할 수 있다!!!

---

Props 기본값 설정하기

컴포넌트에 props가 전달되지 않았을 때를 대비해 기본값을 설정할 수 있다.

function Greeting({ name = "Guest" }) {
  return <h1>Hello, {name}!</h1>;
}

위 예시 코드에서 name prop이 전달되지 않으면 "Guest"라는 기본값이 사용된다.

---

Props의 유효성 검사

PropTypes를 사용하여 props의 타입을 검사할 수 있는데, 이 부분을 통해서 개발 과정에서 발생할 수 있는 오류를 미리 방지하는데 도움이 된다고 생각한다.

import PropTypes from 'prop-types';

function User({ name, age }) {
  return <p>{name}은 {age}살입니다.</p>;
}

User.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number
};

위 코드는 name prop이 문자열이어야 하며 필수값(isRequired)임을, age prop이 숫자(number)여야 함을 명시하고 있는 것을 볼 수 있다!