useReducer에서의 액션은 그 어떤 값도 사용 가능합니다. 그래서 이번에는 이벤트 객체가 지니고 있는 e.target 값 자체를 액션 값으로 사용했습니다. 이런 식으로 인풋을 관리하면 아무리 인풋의 개수가 많아져도 코드를 짧고 깔끔하게 유지할 수 있습니다.

코드를 다 작성했으면 App에서 Info 컴포넌트를 렌더링해 보고 잘 작동하는지 확인해 보세요.

App.js

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

---