TS는 요즘 거의 필수스택에 에디터 부가기능이므로 그냥 쓰는게 좋다고 생각한다.
요즘 가장 핫한 React와 쓰는법을 정리해보려고 한다.
설치
npx create-react-app 프로젝트명 --template typescript 리엑트 프로젝트 설치는 이렇게 하면 되는데,
기존 프로젝트에 ts만 더하고 싶으면
npm install --save typescript @types/node @types/react @types/react-dom @types/jest 이렇게 입력해주고 .js파일을 .ts로 바꿔서 이용해주면 된다.
근데 이렇게 할 바에 그냥 깔끔하게 리엑트로 프로젝트를 만들때 같이 추가해서 설치해주는게 나을 듯 하다..
그럼 이렇게 프로젝트가 생성되는데
일반 프로젝트와 다른 점은 컴포넌트 파일은 js가 아니라 tsx로 확장자를 사용해야 한다.
(ts랑 똑같은데 jsx문법을 지원한다)
그리고 함수, 컴포넌트, state, props 타입체크를 잘 해줘야 에러가 나지 않는다!
리엑트에서 ts문법을어디에 써야하는지 4개로 정리할 수 있겠다.
1. 일반변수, 함수 타입지정
2. JSX 타입지정
리엑트에선 변수나 자료에 <div></div>이런걸 쌩으로 담아서 쓸 수 있음.
리엑트에서 <div></div>이렇게 사용하면 HTML이 아니라 JSX라고 부르는 자료가 됨.
이런 자료를 타입지정하고싶으면 JSX.Element라는 타입을 쓰면 됨.
let 박스 : JSX.Element = <div></div>
let 버튼 : JSX.Element = <button></button>3. function component 타입 지정
function App(){
return (
<div>하윙</div>
)
}간단한 리엑트 컴포넌트를 하나 생성해봤음.
컴포넌트 타입지정은 함수니까 파라미터와 return 타입지정을 하면 됨
파라미터는 항상 props이기 때문에 props가 어떻게 생겼는지 조사해서 타입지정을 하면 됨.
근데 컴포넌트는 JSX를 return함
type AppProps = {
name :string;
};
function App(props:AppProps) : JSX.Element{
return(
<div>{message}</div>
)
} props 파라미터는 어떻게 생겼는지 조사해서 알아서 타입지정해주면 되고,
컴포넌트는 return으로 JSX타입을 뱉으니 JSX.Element를 써주면 된다.
(근데 생략해도 자동으로 타입지정 됨.)
<Container a={<h4>안녕</h4>} />
function Container (props) {
return (
<div>{props.a}</div>
)
}참고로 props로 JSX를 입력할 수 있게 코드를 짜는 경우도 있음.
그럴떈 JSX.IntrinsicElements라는 타입을 사용 가능하다.
<div> <a> <h4>같은 기본 태그들을 표현해주는 타입인데,
그래서 위코드의 컴포넌트에 타입을 넣고싶으면
이런식으로 넣을 수 있음.
이제 a라는 props자리에 <h4>만 넣을 수 있게 타입쉴드를 씌워놓은거임.
📎참고) react v.18부터 JSX.InterinsicElements는 props타입넣을때만 사용가능
4. state 문법 사용 시 타입지정
state 만들땐 그냥 자동으로 타입이 할당되어서 따로 타입을 지정해주지 않아도 된다.
state 타입이 나중에 변화하는 경우는 흔치 않겠지만 그러면 미리 지정하면 됨..
const [user, setUser ] = userState<string | null>('kim');그냥 <>열고 Generic문법을 이용해 타입을 useState함수에 집어넣는 식으로 지정해주면 된다.
5. type assertion 문법 사용할 때
let code : any = 123;
let employeeCode = <number> code; //불가assertion하고 싶으면 as또는 <>쓰면 되는데
리엑트에서 컴포넌트로 오해할 수 있어서 꺾쇠/괄호는 리엑트에서 사용하지 않는다.
as키워드만 가능
하지만 as키워드는 ts보안해제기 때문에 타입이 100%확실할 때만 사용해야한다.
# Summary
결론은 ts쓴다고 리엑트 개발방식이 바뀌는건 아니고
함수 변수 정의 부분에 타입지정을 할 수 있다는것만 달라진다
"props엔 무조건 {name: string}만 들어올 수 있음"
이런 문법을 작성하는게 끝이고 그냥 에디터 부가기능 수준일 뿐임.
