[React Master Class] #3. TypeScript

1. TypeScript를 사용하는 이유

TypeScript는 JavaScript를 기반으로 한 프로그래밍 언어이다. 두 언어는 완전히 다른 언어이지만, TypeScript는 JavaScript를 기반으로 만들어진 언어라서 사용법이나 모양이 거의 비슷하다.

TypeScript is JavaScript with syntac for types.
-공식 홈페이지 TypeScript 소개글-

TypeScript는 Strongly-Typed 언어로, 프로그래밍 언어가 작동하기 전에 type을 확인한다는 의미이다. 즉, 개발자가 코드를 작성하고 프로그램을 실행할 때, 코드 안에 버그가 있어도 쿨한 우리의 JavaScript는 신경도 쓰지 않는다. 일단 프로그램을 실행시키고 Data가 없다고 에러를 뱉어낸다... 유저는 undefined 투성인 화면을 바라보면서 뒤로가기를 누르게 되겠지요...?

이런 문제점을 해결하기 위해 똑똑한? TypeScript는 우리의 바보같은 실수들을 방지하기 위해 타입을 설정하라 지시하고 해당 타입 체킹 과정에서 문제가 생기면 프로그램이 실행되기 전, 코드를 작성하는 중간중간 지속해서 빨간 줄을 뱉으며 압박해준다.

결론적으로, 우리가 TypeScript를 사용하는 가장 큰 이유는 프로덕트가 버그 없이 완벽하게 돌아가도록 개발하기 위해서이다. 물론 이 밖에도 타입을 미리 지정해두면 다른 컴포넌트에서 해당 데이터를 사용하게되면 자동완성되는 편리함도 있다. 해당 타입을 사용하는 데이터, 함수, 인자 등 다양한 상황에서 vscode가 우리에게 추천해주는 다양한 선택지를 미리 보며 개발을 할 수 있다.

배포시, Type 체킹이 마무리된 코드들을 브라우저가 알아볼 수 있도록 Complie을 진행하고 JavaScript로 전환된 코드들이 브라우저에서 실행된다. 주의할 점은, 우리가 사용하는 라이브러리들은 TypeScript로 만들어지지 않은 경우가 많아서 TypeScript가 적용된 라이브러리를 따로 설치해야한다.

2. 라이브러리를 설치하고 import하는 과정에서 왜'@types/~~~ 모시기'는 무슨 모시기인가? 왜 필요한가?

TypeScript를 기반으로 개발하기 위해서는 기본적으로 함께 사용하는 라이브러리들이 TypeScript를 잘 받아들일 수 있도록 @types/~~ 라이브러리가 필요하다. 즉, 우리가 사용할 라이브러리에게 '나는 지금 TypeScript를 기반으로 한 어플리케이션을 개발하고 있는데 너가 필요하다. 그래서 너에게 TypeScript가 뭔지 알려줄께'라는 의미를 전달하면서 함께 설치해준다고 생각하면 쉽다.

우리가 사용하는 대부분의 라이브러리는 JavaScript로 만들어진 라이브러리라서 TypeScript가 어떻게 작용하는지 알려주지 않으면 알 길이 없습니다. 서로 어색하게 째려보고있다고 생각하면됩니다. (쟤 뭐야;;) 왠만한 라이브러리는 npm 라이브러리를 가지고있으며, type definition을 알려주는 라이브러리도 보유하고 있다. Document가면 왠만하면 다 TypeScript 경우 '어떻게 어떻게 설치해라'가 나와있음 그거 설치하면 됩니다.

3. React에 Type을 입혀보자.

1) Prop Types vs TypeScript

• prop의 유/무를 판단할 수 있게 도와주는 type이다.
• Prop Types는 브라우저의 콘솔에 경고표시를 해준다.
• Prop Types는 prop의 유/무를 확인해주지만, 코드를 실행 후에만 확인이 가능하다.
• TypeScript는 코드가 실행되기 전에 오류를 잡아준다. 이런 차이점이 있다.

2) Interface?

아마 대부분 interface를 처음 접하는 분들은 class와 차이점이 무엇이고, interface가 그래서 어떤 역할을 하는 것인지 궁금할 것이다. 우리에게는 모던 자바스크립트 딥다이브라는 좋은 책이 있다. 참고하시길 바랍니다.

깊은 얘기를 하면 끝도 없어서 간략하게 설명드리면, 클래스에서 constructor, 구현부가 빠진 객체라고 생각하면 편하다. 어떤 객체가 있고 이런 프로퍼티와 메소드를 가지고 있다고 선언하는 것이다. 실질적인 구현은 클래스에 맡기고 우리는 인터페이스라는 객체를 가지고 타입으로 지지고 볶고 하는것이다.

TypeScript의 개념으로, Object 모양으로 타입스크립트에게 설명해주는 역할을 한다. interface를 선언하고 '이 객체가 타입이고 나는 이 모양으로 데이터를 핸들링할꺼야' 라는 메시지를 타입스크립트에게 전달해줘서 화난 빨간줄을 잠재운다.

//interface 변수명은 보통 맨 앞에 Interface의 'I'를 맨 앞에 둔다. 필수는 x 그냥 그렇게 써도된다 이정도
//나도 이번에 알았네... 다 수정해야되네..
interface IRoomType {
  desk: string;
  computer: string;
  countWindows: number;
  cleanUp(): 깔끔함;
}

3) Usage

import styled from 'styled-components';

// 1. Interface Type 선언
interface CircleProps {
	bgColor: string;
}
interface ContainerProps {
	bgColor: string;
}

// 2.bgColor라는 Prop을 받았을 때,
// 자식 컴포넌트에서 아래의 방식으로 prop을 받아와서 사용

const Circle = ({ bgColor }: CircleProps) => {
  	        //bgColor Prop의 interface type을 지정
  return (
    <>  //Container Styled-component에 prop을 전송
      <Container bgColor={bgColor} />
      <Container bgColor={bgColor} />
    </>
  );
};

export default Circle;

// 3.Container가 선언된 component에서 type을 제네릭으로 지정
const Container = styled.div<ContainerProps>`
	width: 200px;
	height: 200px;
	background-color: ${(props) => props.bgColor};
`;

4) Optional props

• Component에 prop으로 데이터를 전달하는 과정에서 꼭 필요하지 않은 데이터가 들어오는 경우나, 꼭 필요한 상황이 있고, 필요하지 않은 상황에서 하나의 Interface를 공용으로 사용하는 경우가 있다. 이 경우에 Optional하게 타입을 지정할 수 있다.
• Prop으로 데이터를 전달하는 과정에서 꼭 필요한 데이터와 선택적으로 필요한 데이터를 구분해서 타입을 지정할 수 있다. Type의 프로퍼티 뒤에 '?'의 유무에 따라서 required와 optional을 구분한다.
• required 타입이 지정된 데이터는 무조건 존재해야하는 의미이고, optional 타입이 지정된 데이터는 들어오든 안들어오든 타입스크립트가 문제를 삼지 않는다는 의미이다.

interface IRoomType {
  desk: string;
  bed: string;
  computer: string; // 보통 '?'로 optional을 표시하지 않으면 무조건 required 상태로 해당 데이터가 없는 객체인 경우 타입 에러 발생
  wirelessSpeaker?: string; // 뒤에 '?'가 붙는 프로퍼티는 선택적으로 들어오는 프로퍼티를 의미한다. 들어올지도? 안들어올지도? 몰라?
}

5) Default Props

• Optional Props를 사용해서 데이터의 타입을 지정해줬다면, 해당 데이터를 사용하는 경우 Default Props를 사용해서 지정해줘야한다.
• 컴퓨터 입장에서 Optional Props를 보면서 '너가 들어올지,말지를 모른다고 했는데, 그럼 들어오는 경우하고 들어오지 않는 경우 둘 다 정의를 해줘야겠지? 안그러면 내가 혼란스럽다.' 라고 생각한다.
• Defualt Props는 '선택적으로 데이터가 들어오는 경우, 데이터가 'undefined'가 아니라면 그대로 해당 데이터를 사용하고, 'undefined'라면 default props를 사용해'라는 의미이다.

interface propsDataType {
  borderColor?: string;
  width: '100px';
  height: '200px';
}

~~~블라블라
<ProductDetailCard 
	borderColor={props.borderColor ?? 'white'}  //props.borderColor가 undefinded라면 'white'를 대체 데이터로 사용해
	width={props.width}
/>

~~~블라블라