이제 이 컴포넌트를 App 컴포넌트에서 렌더링합니다.

App.js

import React from 'react';
import Counter from './components/Counter';

const App = () => {
  return (
    <div>
      <Counter number={0} />
    </div>
  );
};

export default App;

---

 

yarn start 명령어를 입력해서 개발 서버를 실행해 보세요. 다음과 같이 카운터 컴포넌트가 나타났나요?

▲ 그림 17-3 카운터 UI