실전 TypeScript 2

오늘의 코드를 살펴보자

const SurveyContext: React.FunctionComponent = props => {
  const [survey, setSurvey] = useState({} as Survey);

  const setSurveyResponse = (key: string, value: string) => {
    setSurvey({
      ...survey,
      [key]: parseInt(value),
    });
  };

  return (
    <Provider value={{ survey, setSurveyResponse }}>
      {props.children}
    </Provider>
  );
}

여기에는 또 두 가지의 요소가 있다. 하나씩 살펴보자

---

1. State의 Type을 지정하는 방법

아래 코드를 보면, React.useState를 호출하여 survey라는 state를 만든 것이 보인다.

const [survey, setSurvey] = useState({});

그런데 이 survey는 그냥 Object가 아니라, Survey라는 Type을 가져야 한다. 그럼 어떻게 해야할까?
다음과 같이 시도해보자.

const [survey as Survey, setSurvey] = useState({});
const [survey: Survey, setSurvey] = useState({});

위의 두 가지는 불가능한 코드다. 구조적으로 그냥 안 되는 코드다. 그냥 이렇게 쓰지 말라고 적어봤다.

이 문제를 해결하는 첫번째 방법은, =의 좌변에 Type을 정의하는 것이다.

const [survey, setSurvey]: [Survey, React.Dispatch<React.SetStateAction<Survey>>] = useState({});

[a, b]는 튜플의 형태다. 튜플이 뭔지 모른다면 검색해보자.
그렇기 때문에 튜플 하나하나에 Type을 지정하는것이 아닌,
튜플 단위로 한꺼번에 지정을 해야한다.

하지만 이건 다소 setSurvey의 타입이 길고 지저분해 보인다. 두번째 방법을 알아보자.

const [survey, setSurvey] = useState({} as Survey);

{} as Survey로 넣어주게 되면, 매개변수로 Survey타입이 넘가게 되어, useState가 해당 타입에 맞게 반환을 한다.

실제 useState의 함수 선언은 다음과 같이 되어있다.

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

Type S를 넘겨주면, 그에 맞는 변수와 Dispatch를 반환하는 것이 보인다.
이렇게 전달 값의 Type을 지정해서 설정할수도 있다.

사실 가장 좋은 방법은, useState의 제너릭을 사용하는 방법이다.

const [survey, setSurvey] = useState<Survey>({});

---

2. Spread Operator

전의 TypeScript Handbook을 포스팅할 때도 잠깐 나왔는데, 이 '...'은 Spread Operator다.

setSurvey({ ...survey, [key]: parseInt(value) });

이 Spread Operator는 Json이나 배열 등을 나열하게 된다.
나열이라는 단어가 어색할 수 있으니, 다음 내용과 함께 차근차근 봐보자.

let survey = { a: 3, b: 4 };
setSurvey({ ...survey, c: 5 });

||
\/

setSurvey({ a: 3, b: 4, c: 5});

차근차근이라기엔 한단계밖에 없었다.
이와 같이 둘을 join할 때 쓸 수 있다.

이 Spread Operator를 배열에 사용하면 이렇게 된다.

const a = [1, 2, 3];
console.log([...a, 4]);
// 출력: [1, 2, 3, 4]

console.log([0, ...a]);
// 출력 [0, 1, 2, 3]