React | TypeScript로 시작하기

create-react-app

create-react-app을 이용하면 된다. --template typescript만 붙여서 생성하면 끝!

npm create-react-app [projectname] --template typescript

props 전달하기

리스트를 전달해보자..

const placeList: Array<any> = [
  {
    name: '어딘가',
    addr: '서울특별시 광진구 구천면로 20',
  },
];

function App() {
  return (
    <div className="App">
      <Places />
      <Map placeList={placeList} />
    </div>
  );
}

그리고 Map컴포넌트에서는 props 타입을 제네릭으로 넣어서 사용한다.

type MapProps = {
  placeList: Array<any>;
};

const Map: React.FC<MapProps> = ({placeList}) => {
  useEffect(() => {
    // 생략
  }, []);
  return (
    // 생략
  );
};

export default Map;