더북(TheBook)

3.2.1 JSX 내부에서 props 렌더링

 

우선 MyComponent.js 파일을 수정하여 해당 컴포넌트에서 name이라는 props를 렌더링하도록 설정해 봅시다. props를 렌더링할 때는 2.4.2절에서 배운 것처럼 JSX 내부에서 { } 안에 감싸 주면 됩니다.

MyComponent.js

import React, { Component } from ‘react’;

class MyComponent extends Component {
  render() {
    return (
      <div>
        안녕하세요,  이름은 {this.props.name} 입니다.
      </div>
    )
  }
}

export default MyComponent;

 

props에 접근할 때는 이렇게 this 키워드를 사용하여 접근합니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.