다음으로는 App에서 이 컴포넌트를 렌더링하세요.

App.js

import React from 'react';
import Average from './Average';
 
const App = () => {
  return <Average />;
};
 
export default App;

---

 

브라우저에서 숫자들을 등록해 보세요. 평균값이 잘 나타나나요?

▲ 그림 8-9 평균 계산하기

 

그런데 숫자를 등록할 때뿐만 아니라 인풋 내용이 수정될 때도 우리가 만든 getAverage 함수가 호출되는 것을 확인할 수 있습니다. 인풋 내용이 바뀔 때는 평균값을 다시 계산할 필요가 없는데, 이렇게 렌더링할 때마다 계산하는 것은 낭비겠지요?