return React TS

어떠한 언어나 프레임워크든 특정 Hook 혹을 갖고 있기 때문에 거기에 맞춘
타입의 종류에 대해 알고 있어야한다. 예를 들면 어떠한 함수 값에는 Promise Event 가 발생할 수도잇고, Async Event가 발생할 수도있다.

하지만 기본적인 React의 기본 함수 개념으로 React.FC 를 사용하여 함수를 정의할 수 있다.
하지만 이러한 함수를 적용함에 있어 어떠한 컴포넌트가 어떠한 특정 이벤트를 발생 시키는지 여부에 따라 타입 스크립트 컴파일러가 타입 추론의 실패 가능성 유무를 고려하여 함수의 특정 부분의 어디에 타입을 지정할지 잘 고려해서 타입을 지정해 줘야 한다.

export const App: React.FC = () => {
	const a = "name" 
}
```

아래의 코드는 기본적인 객체와 객체의 상태관리, React에서 사용하는 사이드 효과 Hook의 코드이다. User 라는 interface 즉 껍데기가 존재하고 id, name, email 의 타입이 존재한다.


```jsx
import React, { useState, useEffect } from 'react';

// 사용자 타입 정의
interface User {
  id: number;
  name: string;
  email: string;
}

// 사용자 목록을 불러오는 API 함수 (가상)
// a
async function fetchUsers(): Promise<User[]> {
  // 여기에 API 호출 로직을 구현하면 됩니다.
  // 예시를 위해 더미 데이터를 반환합니다.
  return Promise.resolve([
    { id: 1, name: 'Jane Doe', email: 'jane.doe@example.com' },
    { id: 2, name: 'John Doe', email: 'john.doe@example.com' }
  ]);
}

function App() {
const [users, setUsers] = useState<User[]>([]);
const [loading, setLoading] = useState<boolean>(true);
// 
// 사이드 이펙트
useEffect(() => {
  // 1번째 줄에 기재된 fetchUsers 함수안에 데이터 User로 정의한 인터페이스를 
  // setUsers 함수안에 data에 넣어준다.
  // 비동기 함수 fetchUsers() 호출하고 setUsers 안에 넣어줃나. 
  // setLoading(flase);

  fetchUsers().then(data => {
    setUsers(data);
    // setLoading에는 false값을 넣어준다.
      setLoading(false);
    });
  }, []);

  // 로딩중일 경우 Loading 코드 노출...

  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            {user.name} - {user.email}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;
```