이번 포스팅에서는 리액트에 충분히 친숙하고, 타입스크립트에도 어느정도 익숙하신 분들 중에서도 리액트와 타입 스크립트를 함께 시작해보고 싶으신 분들을 위한 글을 적어볼거에요.
우선 타입스크립트 리액트 프로젝트를 만들어봐요.
yarn create react-app react-typescript-tutorial --template typescript불필요한 부분들을 모두 삭제해주시구 아무것도 없는 텅텅빈 프로젝트를 하나 만들어봤습니다.
App.tsx
그리고 TextField 라는 간단한 컴포넌트를 만들어줄께요.
TextField.tsx
아주 기본적인 자바스크립트 기반 리액트의 함수형 컴포넌트입니다. 저희가 첫번째로 먼저 해줄 것은 해당 함수가 리액트의 함수형 컴포넌트라는 것을 알려줄 거에요.
해당 컴포넌트가 리액트의 함수형 컴포넌트라는 것을 알려주는 방법은 다음과 같이 TextField 바로 뒤에서 React.FC 타입을 적어주는 것이에요.
타입 스크립트를 사용하는 가장 중요한 이유중 하나는 바로 안전한 타입을 지정해주는 것이죠. 만약에 TextField 가 string 형의 text 라는 prop 하나를 전달 받아야 하는 컴포넌트라고 가정하면 어떻게 TextField 의 타입을 지정해줄 수 있을까요? 바로 아래와 같이 해주시면 됩니다.
그러면 TextField 라는 리액트의 컴포넌트는 string 형의 text 라는 프랍을 전달받을 거라는 것을 명시해 줄 수 있습니다.
그러면 App.tsx 에서 TextField 컴포넌트를 한 번 불러와보도록 할까요?
TextField 를 불러오려고 하였지만, string 형의 text prop 을 전달해주지 않자, vscode가 미리 에러를 보여주는 것을 볼 수 있습니다. text라는 이름의 문자열을 prop으로 전달해주어야만 빨간불을 끌 수가 있습니다.
그리고 TextField 부분에서 전달받아야 하는 prop들을 다른곳에 빼어놓고도 적어줄 수 있습니다.
이런 식으로 타입을 따로 빼놓아주면 코드의 가독성이 더 좋아지겠죠?
조금 더 복잡한 prop 들의 타입을 명시해볼께요.
프로그래밍을 해본적이 있으신 분들이라면 다들 형 지정하는 방식은 어떤식으로 하는건지 알 수 있으시겠죠?
만약에 우리가 위의 prop들을 다 받을 것이긴 하지만, 때때로는 선택적으로 받고 싶은 prop 들이 있을지도 모릅니다. 그럴 경우에는 선택적으로 받고 싶은 prop의 콜론 바로 앞에 ?(Question mark) 를 붙여주시면 됩니다.
이렇게 해주시면 ok, i, fn, person prop 들 같은 경우에는 굳이 전달받지 않아도 에러가 발생하지 않습니다.
어떠신가요? 아주 쉽죠? React 와 Typescript에 대한 기초적인 지식만 있으시다면 React와 Typescript를 함께 사용해보는 것은 아주 간단한 것 같아요. 다음 프로젝트에는 저도 한 번 적용해봐야겠어요.
