3.2.2 React 컴포넌트에 JSX 사용하기

이전 예제에서 다룬 <h1> JSX 태그는 표준 HTML 태그 이름이기도 하다. 컴포넌트를 다룰 때도 같은 문법을 사용한다. 다른 점은 컴포넌트 클래스의 이름이 <HelloWorld/>의 경우처럼 반드시 대문자로 시작한다는 점뿐이다.

다음 예제 코드 3.3은 JSX로 다시 작성한 좀 더 개선된 Hello World다. 여기서는 새롭게 생성한 컴포넌트로부터 엘리먼트를 생성하기 위해서 JSX를 사용했다.

 

예제 코드 3.3 JSX를 이용해서 생성한 HelloWorld 클래스

class HelloWorld extends React.Component {
    render() {
        return (
            <div>
                <h1>1. Hello world!</h1>
                <h1>2. Hello world!</h1>
            </div>
        )
    }
}
ReactDOM.render(
    <HelloWorld/>,
    document.getElementById('content')
)

---