우아한 타입스크립트 with 리액트 리뷰 :: 마이구미

이 글은 우아한 타입스크립트 with 리액트 책을 리뷰한다.
본인은 평범한 프론트엔드 개발자이다. 개인적인 생각과 해석이 들어가 있을 수 있다.
책 링크 - https://m.yes24.com/Goods/Detail/123049083

 

 

개인적으로 다른 회사들은 어떻게 개발하고 있지? 이런 것들은 어떻게 사용할까? 이 고민은 어떻게 생각하고 해결했을까? 등 항상 궁금하고 관심이 있는 주제이다.

그래서 목차도 보지 않고... "배민 개발 사례" 라는 키워드만을 가지고 구매하였다.

 

책을 직접 받고나서야 목차를 보게 되었다.

조금은 기대보다 재미없겠다... 라고 생각이 들었다.

그리고 도입부에서부터 책의 대상을 주니어 개발자로 언급하여 기대를 덜하게 되었다.

 

전체적으로 실제 배민의 개발 사례를 예시로 들어주었다.

그리고 흔히 개발팀에서 일어날 수 있는 논의들에 대해 실제 배민 개발팀의 생각들도 볼 수 있었다.

특히 주제에 대한 실제 배민 개발팀의 생각은 또 언제 나오지? 하면서 읽어나갔다.

 

개인적으로는 후반부로 갈수록 짜임새나 주제가 조금은 아쉽다고 생각했다. (본인에게는 익숙한 것들이 많아서 그럴거라 생각한다.)

그래도 주니어 개발자에게는 유익한 내용이 많다고 생각할 것 같다.

 

개인적인 기준으로 몇가지를 기록하려고 한다.

 

---

 

 

enum 은 타입을 위한 문법이라기보다 개발을 위한 문법 같아요.

"팀 내에서 enum과 유니온 타입을 사용하나요?" 라는 주제에 대한 배민 개발팀들의 생각들이 있었다.

사실 정답은 팀 내부 공감대가 형성되는 쪽으로 개발되는 것이 정답이라고 생각한다.

본인도 사실 타입스크립트의 목적과는 다르다고 생각하기에 enum 은 사용하지 않는 편이다.

 

"우형에서는 type과 interface 키워드를 어떻게 사용할까?"

 

개인적으로는 type 을 사용하고있고, 어떤 것을 사용할지? 목적에 따라 키워드를 다르게 사용할지? 등은 사실 크게 고민해본 적이 없던 주제였다.

각 팀마다 다른 기준을 가지고 사용 방식을 달리 하고 있어서 조금은 신기하면서도 흥미로웠다.

그래도 개인적으로는 타입스크립트의 본질에 충족하기만 하면 된다고 생각하고... Simple is best 이기에... 그냥 type 만을 사용할 것 같다.

 

튜플의 유용함은 useState 를 통해 알 수 있다.

 

튜플은 허용하지 않은 타입이 서로 섞이는 것을 방지하여 타입 안정성을 제공한다.

그 예시로 useState 를 통해 설명하는 것이 좋았다고 생각한다.

useState 의 첫번째 원소는 상태값을 의미하고 두번째 원소는 해당 상태를 조작할 수 있는 setter 이다.

이로써, 배열 원소의 자리마다 명확한 의미를 부여하여 타입 안정성을 보장하고 있다.

 

Exhasutiveness Checking

 

본인은 모르고 있던 용어이자, 방식이다.

 

유니언 타입이나 열거형 타입을 사용할 때, 각 타입에 대응하는 로직을 모두 처리하지 않는 경우 런타임 오류가 발생할 수 있습니다.

주로 switch 문과 유니언 타입을 조합할 때 유용하게 사용됩니다.

 

type Shape = 
  | { kind: 'circle'; radius: number }
  | { kind: 'square'; size: number }
  | { kind: 'rectangle'; width: number; height: number }
  | { kind: 'triangle'; base: number; height: number };

function getArea(shape: Shape): number {
  switch (shape.kind) {
    case 'circle':
      return Math.PI * shape.radius ** 2;
    case 'square':
      return shape.size ** 2;
    case 'rectangle':
      return shape.width * shape.height;
    default:
      // Exhaustiveness checking
      const _exhaustiveCheck: never = shape; // 컴파일 오류 발생
      throw new Error(`Unknown shape: ${_exhaustiveCheck}`);
  }
}

 

 

 

신규로 객체의 key 가 추가되는 경우를 위한 추가 작업을 하지 않는 실수에 대해 오류를 발생하여 미리 에러를 방지할 수 있게 된다.

 

ReactNode vs ReactElement vs JSX.Element

 

대부분 ReactNode 로 사용하곤 했지... 깊게 생각한 적은 없었다.

하지만 구분해서 사용해야할 필요가 있어보인다.

 

ReactNode: 가장 범용적인 타입으로, 렌더링 가능한 모든 것을 포함합니다. 자식 요소에 문자열이나 숫자, 컴포넌트 등 다양한 값이 들어올 수 있을 때 사용합니다.

ReactElement: JSX나 React.createElement로 생성된 구체적인 컴포넌트를 나타냅니다. 컴포넌트가 반환할 수 있는 실제 UI 요소입니다. 

 

P267 ComponentPropsWithoutRef

 

사용해본 적이 없고, 처음 알게된 타입이다.

ref 의 사용 유무에 따라, 구분해서 사용하지 않으면 혼란을 줄 수 있을 여지가 크기에 인지해놔야겠다.