5.1.2 App 컴포넌트에서 예제 컴포넌트 렌더링

App 컴포넌트에서 ValidationSample 컴포넌트를 불러와 렌더링해 보겠습니다. 그 과정에서, App 컴포넌트를 함수형 컴포넌트에서 클래스형 컴포넌트로 전환해 주세요. 우리가 추후 App 컴포넌트에서 ref를 사용할 것이기 때문에 이렇게 미리 클래스형 컴포넌트로 작성해 주겠습니다.

App.js

import React, { Component } from 'react';
import ValidationSample from './ValidationSample';
 
class App extends Component {
  render() {
    return (
      <ValidationSample/>
    );
  }
}
 
export default App;

---

 

코드를 저장하고, 다음 결과물이 나타나는지 확인하세요.

▲ 그림 5-3 리액트로 간단한 검증 구현