[react] props

props

props 는 컴포넌트에서 사용 할 데이터 중 변동되지 않는 데이터를 다룰 때 사용한다. 

parent 컴포넌트에서 child 컴포넌트로 데이터를 전할 때, props 가 사용된다. 

 

props 추가하기

컴포넌트에서 변하지 않는 데이터가 필요 할 땐,
render() 메소드의 내부에 안에 { this.props.propsName } 형식으로 넣고,
컴포넌트를 사용 할 때, < > 괄호 안에 propsName="value" 를 넣어 값을 설정한다.

 

src/components/Header.js

	import React from 'react';
	class Header extends React.Component {
	render(){
	return (
	<h1>{ this.props.title }</h1>
	);
	}
	}
	export default Header;

 

src/components/Content.js

	import React from 'react';
	class Content extends React.Component {
	render(){
	return (
	<div>
	<h2>{ this.props.title }</h2>
	<div> { this.props.body } </div>
	</div>
	);
	}
	}
	export default Content;

 

위와 같이 props 값이 렌더링 될 위치에 { this.props.propsName } 를 넣는다.

 

props 사용하기

이제 App 컴포넌트에도 props 를 넣어주고, App 컴포넌트에서 사용되는 props 값을 child 컴포넌트들로 전달한다.

src/components/App.js

	import React from 'react';
	import Header from './Header';
	import Content from './Content';
	class App extends React.Component {
	render(){
	return (
	<div>
	<Header title={ this.props.headerTitle }/>
	<Content title={ this.props.contentTitle }
	body={ this.props.contentBody }/>
	</div>
	);
	}
	}
	export default App;

 

src/index.js

	import React from 'react';
	import ReactDOM from 'react-dom';
	import './index.css';
	import App from './components/App';
	import reportWebVitals from './reportWebVitals';
	ReactDOM.render(
	<React.StrictMode>
	<App headerTitle = "This is headerTitle"
	contentTitle = "This is contentTitle"
	contentBody = "This is contentBody"/>
	</React.StrictMode>,
	document.getElementById('root')

 

결과

props 기본 값 설정하기

 

props 값을 임의로 지정해주지 않았을 때는 기본값을 설정할 수 있다.

기본값을 설정 할 땐, 컴포넌트 클래스 하단에 아래와 같이 삽입한다.

className.defaultProps = { propName: value }

 

src/components/App.js

	import React from 'react';
	import Header from './Header';
	import Content from './Content';
	class App extends React.Component {
	render(){
	return (
	<div>
	<Header title={ this.props.headerTitle }/>
	<Content title={ this.props.contentTitle }
	body={ this.props.contentBody }/>
	</div>
	);
	}
	}
	App.defaultProps = {
	headerTitle: 'Default header',
	contentTitle: 'Default contentTitle',
	contentBody: 'Default contentBody'
	};
	export default App;

 

src/index.js

	import React from 'react';
	import ReactDOM from 'react-dom';
	import './index.css';
	import App from './components/App';
	import reportWebVitals from './reportWebVitals';
	ReactDOM.render(
	<React.StrictMode>
	<App />
	</React.StrictMode>,
	document.getElementById('root')
	);
	reportWebVitals();

 

결과

Component 의 props Type 설정 및 필수값 지정

컴포넌트 에서 원하는 props 의 Type 과 전달 된 props 의 Type 이 일치하지 않을 때 콘솔에서 오류 메시지가 나타나게 하고 싶을 땐, 컴포넌트 클래스의 propTypes 객체를 설정할 수 있다.

또한, 이를 통하여 필수 props 를 지정할 수 있다.

src/components/Content.js

	import React from 'react';
	class Content extends React.Component {
	render(){
	return (
	<div>
	<h2>{ this.props.title }</h2>
	<div> { this.props.body } </div>
	</div>
	);
	}
	}
	Content.propTypes = {
	title: React.PropTypes.string,
	body: React.PropTypes.string.isRequired
	};
	export default Content;

 

두 props 의 Type 를 모두 string 을 지정하고,

body는 .isRequired 를 추가하여 필수 props 로 설정한다.

 

만약 App 컴포넌트에서 Content 컴포넌트로 잘못된 값을 전달하면 오류가 발생하게 된다.