104. 사용자 목록 컴포넌트 추가하기

UserList.js

import styles from "./UserList.module.css";
// import "./UserList.css";
import Card from './UI/Card';

const UserList = (props) => {
  return <Card className={styles.userList__container}>
    <div className={styles.userList__inner}>
      <p>UserList</p>
      {props.userInfoArr.map((userInfo) =>
        <input className={styles.userList__box} type="text" key={userInfo.userId} readOnly value={`${userInfo.userName} (${userInfo.userAge})`} />
      )}
    </div>
  </Card>
}

export default UserList;

 

css파일도 module.css 파일로 변경하여 
className 에다 각각 {style.classname} 형식으로 변경해서 입력했다