[React] Props

props는 property의 약자로 외부로부터 전달받은 데이터 또는 부모로부터 전달받은 데이터를 의미한다. React의 data flow는 단방향 (One-way data flow)으로 부모가 자식에게 데이터를 전달할 수는 있지만 반대로 자식이 부모에게 데이터를 전달할 수는 없다. 그러므로 props를 수정하는 것은 불가능하다 (읽기 전용).

 

현재 Functional Component로 공부를 하고 있기 때문에 앞으로의 예제들은 Functional Component를 기반으로 작성될 것이다.

props 전달하기

부모 컴포넌트에서 자식 컴포넌트로 props 데이터를 보내려면 html 태그에 속성(property)을 부여하는 것처럼 작성하면 된다.

function Parent() {
    return <Child name="ABC" number={20} />;
}

만약 Object 전체를 props로 보내고 싶다면 다음과 같이 작성하면 된다.

function Parent() {
    const obj = { name: "ABC", number=20 };
    return <Child {...obj} />;
}

props 받기

부모 컴포넌트에서 전달받은 props를 사용하기 위해서는 자식 컴포넌트에서 props를 받겠다고 정의하여야 한다. 그러면 props가 Object의 형태로 받아진다.

function Child(props){
    console.log(props); // {name: "ABC", number: 20}
    return (
    	<div>{props.name}</div>
    	<div>{props.number}</div>
    )
}

대체로 props를 받아올 때는 구조 분해 할당을 이용한다.

function Child({ name, number }){
    return (
    	<div>{name}</div>
    	<div>{number}</div>
    )
}

defaultProps

자식 컴포넌트에서 props를 지정하지 않았을 때 사용하는 기본값을 만들어 줄 수 있다.

// Child.js
function Child({ name, number }){
    return (
    	<div>{name}</div>
    	<div>{number}</div> {/* 10이 출력 */}
    )
}

Child.defaultProps = {
    number: 10;
}

// Parent.js
function Parent() {
    return <Child name="ABC" />;
}

children

자식 컴포넌트 태그 사이에 들어간 것들을 받아오기 위해서는 props.children 을 사용한다. 즉 전달된 props 객체 안에 children 키가 존재한다.

// Child.js
function Child({ name, number, children }){
    return (
    	<div>{name}</div>
    	<div>{number}</div>
        { children } {/* <p>Hello World</p> */}
    )
}

// Parent.js
function Parent() {
    return (
    	<Child name="ABC" number={30}>;
            <p>Hello World</p>
        </Child>
}