[TypeScript] React에서 사용하기_1편

1. React에 TypeScript 추가하기

신규 프로젝트 

npx create-react-app 프로젝트명 --template typescript

프로젝트를 만들 때 TypeScript를 자동으로 세팅해주는 명령어이다. 

기존 create-react-app에 --template typescript 만 추가된 명령어다. 

 

기존 프로젝트

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

패키지를 다운받고 js 파일을 ts, jsx 파일을 tsx 파일로 변경하고 프로젝트를 진행하면 된다. 

하지만 파일을 변경하고 수정하는 작업이 오래걸려서 가능하면 신규 프로젝트를 만드는 방식이 안전하다. 

 

2. React에서 사용하기 

TypeScript를 추가한 React 프로젝트는 기본적인 사용방식은 똑같다. 하지만 컴포넌트 파일이 js와 jsx가 아닌 ts,tsx이다. 

추가로 함수, 컴포넌트, state, props의 타입체크를 해줘야 에러가 나지 않는다. 

 

1. JSX 타입 지정

React에선 변수나 자료에 <div></div>같은 JSX를 담아서 쓸 수 있다. 

let box :JSX.Element = <div></div>
let button :JSX.Element = <button></button>

JSX 자료에 타입을 지정하고 싶다면 JSX.Element 타입을 사용하면 된다. 

 

정확하게 타입 지정을 하고 싶다면 div, a, h4 ... 같은 기본 태그들은 JSX.IntrinsicElements 라는 타입을 사용하면 된다. 

let box :JSX.IntrinsicElements['div'] = React.createElement('div');
let button :JSX.IntrinsicElements['button'] = <button></button>

 

2. 컴포넌트 타입 지정

function App() {
    return (
    	<div>Hello! World!</div>
    )
}

React의 컴포넌트에는 타입 지정을 어떻게 할까? 

함수이기 때문에 파라미터와 return 타입을 지정하면 된다. 

type AppProps = {
    name :string;
}

function App (props: AppProps) :JSX.Element {
    return (
    	<div>{props.name}</div>
    )
}

props 파라미터는 어떻게 넘겨줄지 정해서 타입 지정해주면 되고, 

return 타입의 경우 JSX.Element를 넣어주면 된다. 하지만 생략해도 자동으로 타입이 지정되긴 한다. 

 

3. state 타입 지정

일반적인 state를 만들 땐 자동으로 타입이 할당되어서 걱정할 필요는 없다. 

const [user, setUser] = useState<string | null>('kim');

정말 흔치 않지만 state 타입이 나중에 변화할 수 있다면 Generic, 즉 <> 사용해서 타입을 넣어주면 된다.