[React.js] props란?

props란?

컴포넌트 간에 데이터를 전달해주는 역할.

함수를 예를 들면, 매개변수를 통해 해당 변수의 값을 이용하여 함수안의 코드를 따라 실행 결과가 달라지는 것을 생각하면 쉽다.

import React from 'react';
import Food from './Food'

function App() {
	return(
    	<div>
        	<h1>Hello</h1>
        	<Food fav="orange" />
        </div>
    );
}

export default App;

Food 컴포넌트에 fav라는 props를 전달할때, ES6 Javascript 문법인 구조 분해 할당을 이용하면 훨씬 코드가 간결해진다.

아래는 구조 분해 할당을 이용한 예이다. 

import React from 'react';

function Food({fav}) {
	return <h1>I like {fav}</h1>;
}

export default Food;

원래 구조 분해 할당을 이용하지 않을 경우 점(.)연산자를 이용하여 호출해야하지만, props에 포함된 개수가 많아질 경우 생산성이 떨어진다. 따라서 구조 분해 할당을 사용하면 훨씬 편하다는 점!

 

아래는 점 연산자를 사용하여 객체에 있는 값을 불러오고 있다.

import React from 'react';

function Food(props) {
	return <h1>I like {props.fav}</h1>;
}

export default Food;