[React] 컴포넌트 Prop

1. 컴포넌트 Prop

 - React Props는 JavaScript의 함수 매개변수와 HTML의 attributes와 같다.

 - React Prop는 읽기 전용이다. 값을 변경할 수 없다.

 - 아래의 예제와 같이 사용한다.

// Car.js
import React from 'react';
import ReactDOM from 'react-dom';

class Car extends React.Component
{
    render(){
        return <h2>Hi, I am a {this.props.brand} !</h2>
    }
}

export default Car;

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Car from './Car.js';

const carElement = <Car brand="Ford" />;

ReactDOM.render(carElement, document.getElementById('root'));

 

2. 데이터 전달

 - Prop는 한 컴포넌트에서 다른 컴포넌트로 데이터를 매개 변수로 전달할 수 있다.

 - 아래의 예는 Car.js, Garage.js, index.js에서 객체 데이터를 전달하는 예제이다.

// Car.js
import React from 'react';
import ReactDOM from 'react-dom';

class Car extends React.Component
{
    render(){
        return <h2>Hi, I am a {this.props.brand.model} !</h2>
    }
}

export default Car;

// Garage.js
import React from 'react';
import ReactDOM from 'react-dom';
import Car from './Car.js';

class Garage extends React.Component
{
    render() {
        const carInfo = {name: "Ford", model: "Mustang"};
        return (
            <div>
                <h1>Who lives in my garage?</h1>
                <Car brand={carInfo}/>
            </div>
        )
    }
}

export default Garage;

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Car from './Car.js';
import Garage from './Garage.js';

ReactDOM.render(<Garage />, document.getElementById('root'));

 

3. 생성자의 Prop

 - 컴포넌트에 생성자 함수가 있는 경우 props는 항상 생정자 및 super() 메소드를 통해 React.Component로 전달한다.

// Car.js
import React from 'react';
import ReactDOM from 'react-dom';

class Car extends React.Component
{
    constructor(props){
        super(props);
    }
    render() {
        return <h2>I am a {this.props.model}!</h2>
    }
}

export default Car;

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Garage from './Garage.js';
import Car from './Car.js';

ReactDOM.render(<Car model='Mustang' />, document.getElementById('root'));