리액트 타입스크립트 기초

타입스크립트를 쓰는 이유

1. 에러의 사전 방지

propTypes는 코드를 실행한 “후”에 에러를 확인할 수 있지만 typescript는 실행 전에도 에러체킹이 가능하다.

2. 코드 가이드 및 자동완성(Developer Experience 향상)

기본 문법

interface

객체, 함수, 함수 인자, 클래스 등의 속성과 속성 타입을 정의한다.

interface PlayerShape {
  name: string;
  age: number;
}

const ageCheck = (playerObj: PlayerShape) =>
  console.log(`${playerObj.name}  is ${playerObj.age} years old.`);

ageCheck({ name: 'Danho', age: 10 }); // Danho is 10 years old.
ageCheck({ name: 11, age: 12 }); // Error: Type 'number' is not assignable to type 'string'.

옵션 속성

interface CircleProps {
  borderColor?: string;
  bgColor: string;  
}

속성?: 속성타입을 쓰면 옵션 속성을 줄 수 있다.
위 예시에서 borderColor는 옵션 속성으로 props로 넘겨받을 수도 있고 안 받을 수도 있다. 반면 bgColor는 반드시 props로 받아야한다.

Union Type

OR 연산자(||)와 같은 의미의 타입으로 타입을 여러 개 연결하는 방식이다.

function addNum(num: number | string){
  ...
}
// 파라미터로 number 타입 혹은 string 타입의 값을 받을 수 있다.

이벤트핸들링에서의 타입

const onChange = (event: React.FormEvent<HTMLInputElement>) => {
    const {
      currentTarget: { value },
    } = event;
    setValue(value);
  };

  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log('hello', value);
  };

함께 참고할만한자료
React SyntheticEvent https://reactjs.org/docs/events.html

(자바스크립트) props에 default 값 주기

1. ??(Null 병합 연산자)

연산자 왼쪽의 피연산자값이 null 혹은 undefined인 경우 오른쪽 값을, 그렇지 않으면 왼쪽값을 반환한다.

function Circle({ bgColor, borderColor }: CircleProps) {
  return <Container bgColor={bgColor} borderColor={borderColor ?? bgColor} />;
}

borderColor를 props로 넘겨받지 않는 경우, 즉 borderColor가 undefined인 경우 bgColor를 반환한다.

// borderColor가 undefined인 경우 아래 코드처럼 동작한다.
<Container bgColor={bgColor} borderColor={bgColor} />

2. 함수 인자에 default 값 주기(ES6 문법)

function Circle({ bgColor, borderColor = bgColor }: CircleProps) {
  return <Container bgColor={bgColor} borderColor={borderColor} />;
}

함수 인자에 바로 default 값을 준 것으로 1번의 예시와 동일하게 동작한다.

---

참고자료
타입스크립트 핸드북 - 연산자를 이용한 타입 정의
타입스크립트 핸드북 - 인터페이스