React : CRA로 Typescript 기반 프로젝트 생성하기 (1)

Create React App

//npx
npx create-react-app 프로젝트이름 --template typescript

//yarn
yarn create react-app 프로젝트이름 --template typescript

npx 에서는 create'-'react-app create와 react 사이에 대쉬(-) 를 붙여줘야 동작하는 듯 하다.

yarn 에서는 create react-app 이와 같이 저 부분만 대쉬(-) 를 빼야 동작한다.

"대체 왜 이렇게 해놓은거야...? 헷갈리게 ㅡㅡ"

나는 거의 yarn 만 사용해서 npx 버젼 명령어는 쓸일이 거의 없긴 하다.

---

Components

프로젝트에서 쓸 헤더 부분을 한번 대충 만들어 보자
당연히 함수형 컴포넌트로 제작한다.

import React from 'react'

type Logo = {	// Logo 객체 타입 명시
  src: string;
  alt: string;
};

interface HeaderProps {	// props 로 들어오는 타입 명시
    children: React.ReactElement; // React element
    logo: Logo // 위에서 정의한 타입
}

// 아래 해석하자면
// Header 는 리액트 함수형 컴포넌트구요 
// props로 위에서 명시한 HeaderProps 처럼 받아야해요 라는 뜻  
const Header: React.FC<HeaderProps> = ({ children: c, logo: lg }) => { // 여기부턴 설명 생략

  return (
    <div>
      <img src={lg.src} alt={lg.alt}/>
      {c}
    </div>
  )
}

export default Header

컴포넌트 선언부 아래 부분 설명은 생략한다
만약 아래부분이 젼혀 이해가 안된다면 음.. 리액트 복습을..

---