개요
React + JS 조합으로 개발을 이어나가던 어느날...인턴십을 하게 되면서 주변 개발자 분들에게 TS 영업을 당했다..
인턴십이 끝난 지금을 기회삼아 Js에서 Ts로 넘어갈까 싶어 Ts로 가벼운 React 프로젝트를 하며 몰랐던 개념에 대해 정리해나가기로 했다...
(언제든 피드백은 환영!!!)
시작
먼저 시작부터 보이는 차이점.
Js 의 경우 : npx create-react-app [이름]
Ts 의 경우 : npx create-react-app my-app --template typescript
FC
const QuestionCard: React.FC<Props>= (..) =>{...}
바로 저기에 QuestionCard의 타입으로 FC는 React.FC 라는 타입을 사용하여 화살표 함수를 컴포넌트로 선언을 해주는 역할을 해준다.
장점
- props 에 기본적으로 children이 들어간다는 것.
- 컴포넌트의 defaultProps, propTypes, contextTypes 를 설정 할 때 자동완성을 사용할 수 있다는 점.
단점
- React.FC를 사용하는 경우 defaultProps 가 제대로 작동하지 않아 default값을 직접 설정해 줘야하는 번거로움이 있다.
- children 이 옵셔널 형태로 들어가있다보니까 어떤 컴포넌트는 children 이 들어가면 안되는 경우도 있어서 Props 타입 안에 children 을 명시해야함.
소감
화살표 함수를 사용하면 그것이 컴포넌트라는 것을 명시하기 위해 FC를 사용하지만 요즘 함수형 컴포넌트를 자주쓰는 추세이기에 한번 해보는 목적으로 FC를 사용했지만 개인적으로는 사용하지 않을듯하다....
dangerouslySetInnerHTML
이거는 사실 Ts랑 관련이 없긴한데 보안에 관해 나은 코드를 찾다가 알게된 기능이다.
사용법: 이렇게 HTML 태그에 넣어서 사용
정의 : 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법
목적 : 일반적으로 코드에서 HTML을 설정하는 것은 사이트 간 스크립팅 공격에 쉽게 노출될 수 있기 때문에 위험.
방법 : React에서 직접 HTML을 설정할 수는 있지만, dangerouslySetInnerHTML을 작성하고 __html 키로 객체를 전달.
Enum
특징
- 객체는 (별다른 처리를 해주지 않았다면) 속성을 자유로이 변경할 수 있는데 반해, enum의 속성은 변경할 수 없음.
- 객체의 속성은 (별다른 처리를 해주지 않았다면) 리터럴의 타입이 아니라 그보다 넓은 타입으로 타입 추론이 이루어짐. enum은 항상 리터럴 타입 사용.
- enum의 속성 값으로는 문자열 또는 숫자만 허용됩니다.
사용 목적 : Enum의 경우는 넓은 범위의 추상화 수단으로 타입의 범위를 줄이고 코드의 가독성을 줄이기 위해 사용하게 된다.
예 )
다국어를 지원하는 코드의 경우
// 이렇게 하면 언어 코드를 따로 적어줘야 하고 type LanguageCode = 'ko' | 'en' | 'ja' | 'zh' | 'es' // 이렇게 하면 코드가 너무 길어짐 type LanguageCode = typeof korean | typeof english | typeof japanese | typeof chinese | typeof spanish // 여기서 Enum 객체를 사용하면 간단하게 코딩이 가능. export enum LanguageCode { korean = 'ko', english = 'en', japanese = 'ja', chinese = 'zh', spanish = 'es', } const code: LanguageCode = LanguageCode.korean
이러하듯 Ts의 경우 넓은 범위의 추상적인 타입이 올 수 있기 때문에 Enum은 강력한 무기가 될 수 있다.
