[5# Properties_ Props] Props? 인자를 전달하는 역할

목차 :

1. props?

 

---

 

1. props?

React를 구성하는 Component에서 상위 부모로 부터 값을 받아오거나, 하위 자식에게 값을 전달해줄 때 사용되는

강력하고 효율적이며 기본적인 속성이다.

 

props는 변수, state 등이 전달 될 수 있다.

[ParentComponent.js]
import React from 'react';
import ChildComponent from './ChildComponent.js';

function ParentComponent() {
  return (
    <ChildComponent name="John" />
  );
}

[ChildComponent.js] 
function ChildComponent(props) {
  return (
    <div>
      <p>Hello, {props.name}!</p>
    </div>
  );
}

위 예제 코드를 확인해보면

ParentComponent에서  name 이라는 속성 이름으로 'John'이라는 값을 ChildComponent에게 전달했다.

ChildComponent에서는 props라는 인자를 받아오는데

JSX 부분에서 {} 괄호 안에 사용할 때 props.name으로 props안에 부모로부터 전달 받은 name을 사용했다.

 

만약에 부모로 부터 전달 받은 속성 이름이 없을 경우 자식 Component에서 기본값을 설정해 줄 수 있다.

ChildComponent.defaultProps = {
  name: "Guest", // name 속성의 기본값을 "Guest"로 설정
};

ChildComponent안에 위 코드를 작성하게 되면 ParentComponent로 부터 name이라는 속성값이 전달되지 않을 경우

기본값을 사용한다.
이는 name이라는 속성값이 전달되지 않을 경우를 대비한 예외 처리이다.