React 입문 | 컨포넌트 생성 | 컴포넌트에 값 전달
MyComponent에서는 msg라는 속성을 준비하고 그것을 포함하여 표시하고 있다. 컴포넌트에는 값을 준비하여 아주 간단히 할 수 있었다.
컴포넌트에 값을 전달하려면?
그럼 컴포넌트를 사용할 때에 컴포넌트에 값을 전달해서 표시를 수행하려면 어떻게 해야 할까? 즉, index.js으로 ReactDOM.render에서 MyComponent을 표시 할 때에 MyComponent에 필요한 값을 전달하여 표시를 배치할 수 있다.
이것도 비교적 간단히 할 수 있다. 우선 컴포넌트 수정이다. 아래에 MyComponent.js 수정 소스 코드를 올려 두었다. 이것을 참고로 내용을 다시 작성한다.
import React, { Component } from 'react';
class MyComponent extends Component {
constructor() {
super();
}
render() {
return (
<div>
<h1>{this.props.title}</h1>
<p>{this.props.content}</p>
</div>
);
}
}
export default MyComponent;
여기에서는 다음과 같이 표시를 준비하고 있다.
<h1>{this.props.title}</h1>
<p>{this.props.content}</p>
this의 “props"라는 속성에서 title과 conent 값을 추출한다. 이 props는 컴포넌트 호출하여 값을 받는 데 사용되는 속성이다. 여기에서 title과 content라는 값을 얻어서 표시하고 있다.
또한 render에서 return하고 있는 내용은 <div>
태그에 정리하고 있다는 점도 중요하다. return 할 수 있는 것은 하나의 태그뿐이다. 여러 태그가 있는 경우는 그 전체를 하나의 태그에 정리해 둘 필요가 있으므로 주의한다. 예를 들어,
return (
<h1>{this.props.title}</h1>
<p>{this.props.content}</p>
);
이렇게 쓰면 에러가 되어 잘 움직이지 않는다. return하는 것은 항상 하나의 태그뿐이다.
MyComponent에 값을 전달
그럼, 수정한 MyComponent을 이용해 보자. index.js을 아래와 같이 수정한다.
import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';
import './index.css';
ReactDOM.render(
<MyComponent
title="My COMPONENT"
content="이것은, 오리지널 컴포넌트 쌤플입니다." />,
document.getElementById('root')
);
Web 브라우저에서 제목과 메시지가 나타낼 수 있다.
여기에서는 render의 첫번째 인자로 <MyComponent />
를 지정하고 있지만, 이 태그 안에 다음과 같이 속성이 추가되어 있다.
<MyComponent title="OO" content="OO"/>
이 title과 content라는 속성이 MyComponent.js의 this.props 안에 title과 content라는 속성으로 추가되어 있었다. 이러한 컴포넌트의 태그를 사용하는 측에서는, this.props에 준비하는 속성을 컴포넌트 태그의 속성으로 제공함으로써 값을 전달할 수 있다.