모던 리액트 Deep Dive 스터디(2) [Javascript 기본, Typescript 기본]

boot·2024년 1월 7일

모던 리액트 Deep Dive

목록 보기

2/4

태스크 큐, 마이크로 태스크 큐 그리고 렌더링

자바스크립트는 싱글스레드 언어이고 여기서의 스레드는 콜스택을 의미하며 콜스택에서 함수가 실행/완료되면 해당 함수의 실행 컨텍스트가 콜스택에서 사리진다. 근데 이 함수가 setTiemout이나 Promise를 호출하면 태스크큐 혹은 마이크로 태스크큐에 setTimeout의 호출함수나 Promise의 리턴값이 콜스택이 비워졌을 때 이벤트루프에 의해 콜스택으로 보내진 후 실행된다.

현재까지 내가 알고 있던 부분이다.

아 추가적으로 Promise는 마이크로 태스크큐 그리고 setTimeout은 태스크 큐에 들어가며 마이크로 태스크큐가 태스크큐보다 우선순위가 높다라는 사실까지.

하지만 여러분 그거 아나요.
우리의 브라우저가 언제 렌더링 되는지..?
아니 뭐 리액트에서 state가 변경될 때 뭐 혹은 javascript로 DOM 요소를 직접 조작할 때 이런것도 있지만 조금 더 새로운 대답.

저는 오늘 알았습니다. 이건 아주 재밋고 놀랍더이다.
그건 마로 마이크로 태스크큐의 작업들을 모두 실행한 뒤에도 렌더링이 일어난다고 합니다.

마이크로 태스크 큐 작업들이 끝날 때 마다 즉, 마이크로 태스크큐가 싹 비워질 때 마다도 한 번씩 렌더링 기회를 얻는다고 합니다.

리액트 코드를 효과적으로 작성하기 위한 타입스크립트 활용법

any 대신 unknown

any는 자바스크립트에서 타입스크립트로 넘어가는 과도기와 같은 정말 예외적인 경우에만 사용하는 것이 좋다.
대신 불가피하게 아직 타입을 단정할 수 없는 경우에는 unknown을 사용하는 것이 좋다.
unknown은 모든 값을 할당할 수 있는 top type으로 어떠한 값도 할당할 수 있다.
그러나 any와 다르게 바로 사용은 불가능하며 type narrowing하여 사용할 수 있다.

function doSomething(callback:unknown){
	if (typeof callback === 'function'){
      callback()
    }
        
	throw new Error('callback은 함수여야 합니다.')
}

타입 가드를 적극 활용하자

instanceof와 typeof
- instanceof는 지정한 인스턴스가 특정 클래스의 인스턴스인지 확인할 수 있는 연산자이다.
- typeof는 특정요소에 대한 자료형을 확인하는데 사용된다.
in
- in은 property in object로 사용되는데, 주로 어떤 객체에 키가 존재하는지 확인하는 용도로 사용된다.

인덱스 시그니처

인덱스 시그니처란 객체의 키를 정의하는 방식을 의미한다.

type Hello = {
  [key: string]: string
}

const hello: Hello = {
  hello: 'hello',
  hi: 'hi
}

hello['hi'] // hi
hello['안뇽'] // undefined

[key: string]이 부분이 인덱스 시그니처다.
근데 뭔가 딱봐도 키가 너무 열려 있어서 별로 타입스크립트 쓰는 이유가 없어보인다.
객체의 키는 동적으로 선언되는 경우를 최대한 지양해야한다.

그 방법이 아래의 방법이다.

type Hello = Record<'hello' | 'hi', string>

const hello: Hello = {
  hello: 'hello',
  hi: 'hi',
}

Record<key, value>를 사용하면 객체의 타입에 각각 원하는 키와 값을 넣을 수 있다.

덕 타이핑

타입스크립트의 핵심 원칙 중 하나는 타입 검사가 값의 형태에 초점을 맞춘다는 것입니다.
이를 "덕 타이핑" 또는 "구조적 서브타이핑"이라고 부르기도 합니다.

Object.keys(hello).map((key)=> {
  //Element implicity has an 'any' type because expression of type 'string'
  //can't be used to index type 'Hello'
  const value = hello[key]
  return value
})

분명 hello 객체의 key를 Object.keys로 잘뽑았고 그 키로 객체에 접근했는데 에러가 발생했다.
이러한 문제는 왜 발생할까?

Object.keys(hello)가 반환하는 타입은 string[]이다.

타입스크립트의 핵심 원칙은 타입 체크를 할 때 그 값이 가진 형태에 집중한다는 것이다.

type Car = { name: string }
type Truck = Car & { power: numer }

function horn(car: Car){
  console.log(`${car.name}이 경적을 울립니다 뿅뿅`)
}

const truck: Truck = {
  name: '비싼차',
  power: 100
}

horn(truck)

자바스크립트는 객체의 타입에 구애받지 않고 객체의 타입에 열려 있으므로 타입스크립트도 이러한 자바스크립트의 특징을 맞춰줘야한다.
즉, 타입스크립트는 이렇게 모든 키가 들어올 수 있는 가능성이 열려있는 객체의 키에 포괄적으로 대응하기 위해 string[]으로 타입을 제공하는 것이다.

boot

Beyond the wall

이전 포스트

모던 리액트 Deep Dive 스터디(1) [들어가며, Javascript 기본]

다음 포스트

모던 리액트 Deep Dive 스터디(2) [Javascript 기본, Typescript 기본]