<step89>'react_ts_userList'

1)

User.tsx

import React from 'react';
import { UserType } from './UserList';

type UserProps = {
    // 부모 컴포넌트에서 import 해온 타입을 재사용
    user: UserType
}
const User = ({user}: UserProps) => {
    const { name, age, position } = user
    return (
        <div>
          <p>이름 : {name}</p>  
          <p>나이 : {age}</p>  
          <p>포지션 : {position}</p>  
        </div>
    );
};

export default User;

UserList.tsx

import React, { useState } from 'react';
import User from './User';

// 배열안에 들어갈 객체 타입을 지정
// 자식 컴포넌트로 넘겨주기 위해 export
export type UserType = {
    id: number;
    name: string;
    age: number;
    position: string;
}
const UserList = () => {
    const [ userList, setUserList ] = useState<UserType[]>([
        {
            id: 0,
            name: "김그린",
            age: 24,
            position: "front-end"
        },
        {
            id: 1,
            name: "이블루",
            age: 26,
            position: "back-end"
        },
    ])
    return (
        <div>
          {userList.map(user=><User key={user.id} user={user}></User>)}  
        </div>
    );
};

export default UserList;