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에 준비하는 속성을 컴포넌트 태그의 속성으로 제공함으로써 값을 전달할 수 있다.