[TS] useState의 초기 값 #union 타입

🚨 불편

이번 글은 에러..까지는 아니고 useState에 초기화 할 때 타입을 지정해주는 두 가지 방식의 기법에 대해 정리하려고 한다. 굳이 에러 카테고리에 작성한 이유는 초기값을 어떻게 주는지 고민을 많이 했던 문제라 그냥 여기에 작성함.

 

💡 첫 번째 방법

초기값(`initialState`)을 정의하고, 해당 타입을 제네릭으로 넣어준다.

 

코드 예시

type Counter = {
  numberHistory: number[],
  currentNumber: number,
}

const initialCounter: Counter = {
  numberHistory: [],
  currentNumber: 0,
};

const CounterComponent = () => {
  const [counter, setCounter] = useState<Counter>(initialCounter);
/** 생략 */
}

• Counter 타입을 정의한다.
• Counter 타입에 맞춰 초기값(`initialCounter`)을 정의한다.
• useState에 제네릭과, 초기값을 전달한다.

 

불편한점

처음에 위의 코드처럼 작성하고 많은 불편함을 느꼈다. 기존 JS 프로젝트에서는 한 줄로 끝나는 코드였지만 TS로 넘어오면서 코드 라인이 매우 길어졌기 때문이다. 기존 JS => (`const [counter, setCounter] = useState({})`);

 

 

💡 두 번째 방법

따라서 다른 방법이 있나 알아봤고, `유니온 타입`을 사용하면 내가 느끼는 불편함이 `일부` 해소될 수 있는것을 알게 되었다. 

 

코드 예시

type Counter = {
  numberHistory: number[],
  currentNumber: number,
}

const CounterComponent = () => {
  const [counter, setCounter] = useState<Counter | null>(null);
/** 생략 */
}

• 초기값을 사용하지 않고, 유니온 타입으로 null까지 포함시켰다.
• useState의 초기값으로 null을 사용했다.

 

문제점

첫 번째 코드는 불편한점이었다면 두 번째 코드는 편하지만 문제(까지는아닐수도?)점이 존재한다. counter값이 null일 수 있다. 즉, 안정성이 약간 떨어질 수 있고 `옵셔널 체이닝`을 사용해야 할 수도 있다. 

 

이런 문제점을 들어보니 정말 귀찮은 경우가 아니라면.. 첫 번째 방법을 지향하는게 타입스크립트를 사용하는 이유를 해치지 않을 것 같다.

 

📍 정리

타입스크립트를 사용하면서 느꼈던 점이 난해하다는 것이다. (화살표 함수 처음봤을 때 * 10) 그리고 사용하는 것도 불편하다. 미리 선언해주어야 할 것도 많고, 생각할 것도 많다. 하지만 그만큼 안정성을 제공해주고 컴파일 시점에 어떤 에러가 있는지 알 수 있다는 것은 또 굉장히 큰 장점이라고 생각한다. 따라서 최대한 타입스크립트적으로 작업을 하는데에 익숙해져야할 것 같다.