React Props

안녕하세요. 오늘은 React의 Props에 대해 알아볼게요.

 

 

 

Props(Properties)

 

Props(Properties)는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위한 매개체예요.

 

HTML에서 속성을 전달하는 것과 비슷한 개념으로, React에서는 이를 통해 컴포넌트 간의 데이터 흐름을 제어해요.

 

즉, 부모 → 자식으로만 전달되는 단방향 데이터 흐름(one-way data flow)**을 갖아요.

자식 컴포넌트는 props로 전달된 데이터를 읽기만(read-only) 할 수 있고, 직접 수정할 수 없어요.

 

만약 자식이 부모의 데이터를 변경해야 한다면, 부모가 전달한 콜백 함수를 실행하는 방식으로 제어해야 해요.

 

 

 

기본적인 Props 전달

 

React에서 컴포넌트는 일반적으로 다음과 같이 데이터를 전달받아요.

function ChildComponent(props: { name: string }) {
  return (
    <>
      안녕하세요 {props.name}입니다.
    </>
  )
}

function ParentComponent() {
  return <ChildComponent name="홍길동" />;
}

위 코드에서 ParentComponent는 ChildComponent에게 name="홍길동"이라는 props를 전달해요.

ChildComponent는 매개변수로 받은 props 객체 내부의 props.name을 이용해 데이터를 화면에 출력해요.

 

참고로 props는 객체 형태로 전달되며, 내부에는 부모에서 넘긴 모든 데이터가 들어있어요.

 

 

 

구조 분해 할당(Destructuring) 활용

 

props는 객체이기 때문에, 구조 분해 할당 문법을 사용하면 더 간결하게 작성할 수 있어요.

type ChildProps = {
  name: string;
};

function ChildComponent2({ name }: ChildProps) {
  return <div>안녕하세요 {name}님</div>;
}

이 방식은 props.name처럼 매번 props. 를 붙이지 않아도 되어 가독성이 좋아져요.

 

 

 

여러 개의 Props 전달

 

하나의 컴포넌트에 여러 개의 props를 전달할 수도 있어요.

function MultiProps(props: { name: string; colorProps: string }) {
  return (
    <div style={{ color: props.colorProps }}>
      반갑습니다. {props.name}
    </div>
  );
}

function Parent() {
  return <MultiProps name="홍길동" colorProps="lightblue" />;
}

이 경우 props 객체 안에는 name과 colorProps 두 개의 값이 들어가며,

필요할 경우 다음과 같이 구조 분해 할당으로 받는 것도 가능해요.

function MultiProps2({ name, colorProps }: { name: string; colorProps: string }) {
  return <div style={{ color: colorProps }}>반갑습니다. {name}님</div>;
}

 

 

 

 

선택적 Props와 기본값 설정

 

React에서는 props를 선택적으로 받을 수 있고, 값이 없을 때 기본값(default value)을 지정할 수도 있어요.

type Multi2Type = {
  name?: string;        // 선택적 프로퍼티
  colorProps: string;
}

function MultiProps2({ name = '개구리', colorProps }: Multi2Type) {
  return <div style={{ color: colorProps }}>반갑습니다 {name}님</div>;
}

위 코드에서 name은 옵셔널(?)이기 때문에 전달되지 않아도 오류가 나지 않아요.

대신, 값이 전달되지 않을 경우 '개구리'라는 기본값이 사용해요.

 

 

 

Wrapper 컴포넌트와 Children Props

 

Wrapper 컴포넌트는 다른 컴포넌트를 감싸는 역할(Container)을 하는 컴포넌트예요.

이때, 내부에 감싼 내용을 children이라는 props로 전달받아요.

type ChildrenType = {
  children: React.ReactNode; // HTML 태그나 사용자 정의 컴포넌트 모두 가능
}

export const Wrapper = ({ children }: ChildrenType) => {
  return (
    <div style={{ border: '2px solid black', padding: '16px' }}>
      {children}
    </div>
  );
};

이 Wrapper를 사용할 때는 다음과 같이 다른 JSX 요소를 내부에 포함시키면 돼요.

<Wrapper>
  <div>안녕하세요. 만나서 반갑습니다.</div>
</Wrapper>

이때 <div>... </div>는 Wrapper의 children으로 전달되어 내부에서 렌더링 돼요.

 

 

 

객체형 Props 전달 (User 예시)

 

객체 전체를 props로 넘기는 것도 가능해요. 예를 들어, 사용자 정보를 담은 user 객체를 전달해 볼게요.

type User = {
  name: string;
  age: number;
  email: string;
};

type UserCardProps = {
  user: User;
};

const UserCard = ({ user }: UserCardProps) => {
  const { name, age, email } = user;
  return (
    <>
      <p>{user.name} / {user.age} / {user.email}</p>
      <p>{name} / {age} / {email}</p>
    </>
  );
};

function Parent() {
  const userData = {
    name: '이민경',
    age: 30,
    email: 'lmg123',
  };

  return <UserCard user={userData} />;
}

여기서 UserCard는 user 객체를 props로 받아 구조 분해를 통해 내부 값을 꺼내서 사용해요.

 

 

 

Props의 특징 정리표예요.

 

항목	설명
데이터 흐름	부모 → 자식 (단방향)
읽기/쓰기	자식에서는 읽기만 가능 (read-only)
전달 방식	객체 형태로 전달
여러 개 전달	{ key1: value1, key2: value2 } 형태로 여러 값 전달 가능
구조 분해	function({ name }) 형태로 간결하게 사용 가능
기본값 지정	매개변수 기본값({ name = '기본값' })으로 설정 가능
children	감싸진 JSX를 props.children으로 전달 가능

 

 

 

여기까지 React Props에 대해 알아봤는데요.

 

React의 props는 컴포넌트 간의 데이터 전달 수단이며,

부모가 데이터를 관리하고, 자식은 이를 화면에 표시하는 역할을 해요.

이러한 단방향 데이터 흐름 덕분에 컴포넌트의 상태 관리가 명확하고 예측 가능할 것 같아요.