[TS / React] props 전달

TS-REACT-TUTORIAL

 

components/Greeting.tsx

import React from 'react';
type GreetingsProps = {
    name: string;
    mark: string
}
const Greetings = ({ name, mark } : GreetingsProps ) => {
    return (
        <div>
            Hello, {name} {mark}
        </div>
    );
};

export default Greetings;

 

App2.tsx

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

const App2 = () => {
    return (
        <div>
            <Greetings name="Green" mark="hihi"/>
        </div>
    );
};

export default App2;

 

---

 

components/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;

 

components/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;

 

App2.tsx

import React from 'react';
// import Greetings from './components/Greetings';
import UserList from './components/UserList';

const App2 = () => {
    return (
        <div>
            {/* <Greetings name="Green" mark="hihi"/> */}
            <UserList />
        </div>
    );
};

export default App2;