[React] props를 통해 컴포넌트에게 값 전달하기

MinJae·2024년 10월 20일

목록 보기

8/21

📌 props ?

property의 약자로 리액트에서는 속성이라는 뜻으로 사용됩니다.
리액트에서 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용하는 속성입니다.
상위 컴포넌트가 하위 컴포넌트에 값을 전달하기 때문에 단방향 데이터 흐름을 갖습니다.
부모 컴포넌트는 수정 가능하지만, 자식 컴포넌트는 읽기만 가능합니다.

props는 값을 변경할 수 없다

props는 단방향 데이터 흐름이므로 부모에서 자식으로만 데이터가 흐르며, 자식 컴포넌트는 전달받은 데이터를 수정할 수 없습니다.
props는 읽기 전용이며, 자식 컴포넌트에서 이를 변경하려고 하면 안됩니다.

모든 리액트 컴포넌트는 props를 직접 바꿀 수 없고, 같은 props에 대해서는 항상 같은 결과를 보여줍니다.

Props의 활용 예시

function ParentComponent() {
  const userName = "MinJae";
  return <ChildComponent name={userName} />;
}

function ChildComponent({ name }) {
  return <p>Hello, {name}!</p>;
}

위 예시에서는 ParentComponent가 useName이라는 변수 값을 자식 컴포넌트인 ChildComponent로 전달합니다. 이때, name이라는 props가 사용되며, 자식 컴포넌트는 props로 받은 값을 그대로 표시합니다. 결과적으로 화면에는 "Hello, MinJae!"라는 문구가 출력됩니다.

물론 복수의 props도 전달할 수 있습니다.

function ParentComponent() {
  const userName = "MinJae";
  const userAge = 27;
  return <ChildComponent name={userName} age={userAge} />;
}

function ChildComponent({ name, age }) {
  return <p>{name} is {age} years old.</p>;
}

이 예시에서는 ParentComponent가 name과 age 두 가지 값을 props로 자식 컴포넌트에 전달합니다. ChildComponent는 전달받은 두 가지 값을 각각 사용하여 "MinJae is 27 years old."라는 문구를 출력합니다. 이처럼 props를 통해 여러 값을 동시에 전달할 수 있습니다.