리액트 딥다이브(문법,타입스크립트)

자주 사용하는 자바스크립트 문법

구조분해할당

const {a,b,c} = s

• 배열 또는 객체의 값을 분해하여 개별 변수로 할당하는 것
• ... spread 를 사용해서 나머지 모든 값을 해당 변수에 넣을 수 있다.
• 객체를 통한 구조 분해 할당에서는 각 변수의 네임을 지정할 수 있다.
  • 보통 리액트에서 props 꺼내올 때 구조분해할당을 통해서 각 변수에 할당해서 가져온다.
  • 보통 구조분해할당을 진행하게 되면 트랜스파일된 파일의 크기가 커질 수 있다.
    *트랜스파일: 바벨을 통해 최신 자바스크립트 문법을 다양한 브라우저에서 일관되게 적용할 수 있도록 해줌

전개 구문

const arr = {a:1, b:2}
const arr2 = arr

참조값에 의한 전달이 일어나서 복사본에 대해서 수정하면 원본 객체도 같이 수정됨

const arr = {a:1, b:2}
const arr2 = {c:3, d:4}
const arr3 = {...arr1, ... arr2}

이렇게 전개연산자 방식으로 전달해주면 트랜스파일 된 파일의 크기가 매우 커진다.
객체 초기자를 사용해주면 간편하게 객체에 선언할 수 있게 된다.

Array 메소드(filter, map, reduce, forEach)

• map: 배열을 순회하면서 콜백으로 연산한 결과로 구성된 새로운 배열을 만들어낼때
• filter: 배열을 순회하면서 특정 조건에 맞는 원소들을 반환한다.
• reduce: 콜백함수,초기값을 인자로 받아서 초기값에 누적해서 결과를 반환(보통 배열의 합을 구할 때 사용된다)
• forEach: 배열을 순회할 때만 사용된다(map 과는 다르게 단순히 콜백함수만 실행하고 새로운 배열 return x)
• for 문과는 다르게 break; return; 을 통해서 함수를 종료할 수 없다!! -> o(n) 만큼은 실행하게 됨

타입스크립트

• js 는 동적 타입 언어 이기 때문에 런타임 에서 타입이 지정되어서 코드 실행해야만 에러 알아낼 수 있어서 ts 같은 정적 타입 언어에 비해 디버깅이 어렵다. (js 에서 typeof 를 통해 타입에 대해 검증하기도 어렵다)

• 이런 한계를 극복하기 위해 런타임에서 타입을 검증하는 것이 아닌 빌드 타임에서 검증할 수 있는 TS 가 도입

• any 대신 unknown 을 최대한 써보자. (unknown 은 모든 값을 할당할 수 있는 top type 으로 타입을 단정할 수 없을때) <-> never 은 unknwon 과는 반대로 어떤 타입에 대해서도 들어올 수 없을 떄

• instance of ,type of 특정 인스턴스 나 타입 임을 확인할 수 있다. (타입을 좁혀서 확인하는 타입가드로서 로직에 대해 명확하게 표현)

• in 을 사용해서 객체 내에 키가 존재하는지 확인하기 위해 쓰인다.

• generic 키워드를 선언해 다양한 타입에 대해서 처리할 수 있도록 함(타입의 일반화)

• 객체의 키 에 대한 타입을 선언해줄 때에는 [key:string] 로 선언하게 된다.

  • Object.keys(hello) 에 대한 타입을 유추하게 되면 객체의 key 값에 대한 타입이 아닌 string 으로 나옴. 이렇게 되면 인덱스를 통해 접근했을 때 타입이 맞지 않다고 나옴 -> as 를 통해 타입 캐스팅을 하여 Array<keyof Hello> 로 타입 단언하는 부분이 필요함.