[React] 컴포넌트에 props 전달하기, prop의 기본값 지정하기

 

 

리액트에서 props는 컴포넌트 간에 데이터를 전달하기 위해 사용되는 중요한 개념입니다.

 

props

props는 "properties"의 줄임말로, 컴포넌트에 전달되는 입력값을 의미합니다.

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됩니다.

props는 읽기 전용(read-only)이며, 자식 컴포넌트에서 수정할 수 없습니다.

 

 

Props를 사용하는 방법

부모 컴포넌트에서 자식 컴포넌트로 데이터 전달하기

// App.js

import UserProfile from './UserProfile';

function App() {
  return (
    <div>
      <UserProfile name="John" age={30} email="john@example.com" />
    </div>
  );
}

export default App;

위 코드에서 App 컴포넌트는 자식 컴포넌트인 UserProfile 컴포넌트에

name, age, email이라는 세 개의 데이터를 하나씩 전달합니다.

 

// UserProfile.js
function UserProfile({ name, age, email }) {
  return (
    <div>
      <h1>Name: {name}</h1>
      <h2>Age: {age}</h2>
      <p>Email: {email}</p>
    </div>
  );
}

export default UserProfile;

자식 컴포넌트인 UserProfile 컴포넌트는

props를 통해 전달된 name, age, email을 받습니다.

 

props를 선언할 때( ) 괄호 안에 { } 중괄호를 사용해야 합니다.

function UserProfile({ name, age, email }) {
  // ...
}

 

이 문법을 “구조 분해 할당”이라고 부르며 함수 매개변수의 속성과 동등합니다.

function UserProfile({ name, age, email }) {
  let name = props.name;
  let age = props.age;
  let email = "john@example.com";
}

 

 

prop의 기본값 지정하기

값이 지정되지 않았을 때, prop에 기본값을 설정할 수 있습니다.

기본값을 설정하기 위해서는 변수 바로 뒤에 = 과 함께 기본값을 넣어 구조분해할당을 해주면 됩니다.

function UserProfile ({ name, age = 20, email }) {
  // ...
}

< UserProfile name={...} email={...} />이 age prop 없이 렌더링 된다면,

age는 20으로 설정됩니다.

 

이 기본값은 age prop이 없거나 age={undefined}로 전달될 때 사용됩니다.

그러나 age={null} 또는 age={0}으로 전달된다면, 기본값은 사용되지 않습니다.