react-deep-dive 스터디(1장)

1장 리액트 개발을 위해 꼭 알아야 할 자바스크립트

1.1 자바스크립트 동등 비교
리액트의 가상 DOM과 실제 DOM의 비교, 컴포넌트 렌더링판단, 변수나 함수의 메모이제이션 등이 전부 자바스크립트의 동등 비교를 기반으로 함
자바스크립트 타입 중 객체 타입이 있는데 객체 타입은 참조를 전달한다고 해서 참조 타입이라고도 불린다.
이 객체 타입을 통해 자바스크립트 동등 비교의 특징이 나타남
원시타입과 객체타입의 값을 저장하는 방식의 차이가 동등 비교를 할 때 차이를 만드는 원인이 됨
또 다른 비교공식으로 Object.is 가 있음(ES6부터 도입)
리액트는 이 Object.is를 통해 동등 비교를 함
ObjectIs를 기반으로 shallowEqual이라는 함수를 만들어 사용하는데 이 함수는 모든 키의 값이 동일하면 true 아니면 false를 반환함

1.2 함수

1. 함수 선언문
2. 함수 표현식

• 함수 선언문과 표현식은 호이스팅 차이
• 함수 사용시에 아예 위쪽에 다 선언 후에 사용하는게 제일 좋은 방법이라고 생각

3. Function 생성자

• Function 생성자 함수를 사용해서 함수를 생성(좋은 방법은 아닌듯)

4. 화살표 함수
   일반함수와 다르게 arguments가 존재하지 않고, this바인딩이 존재함

** 즉시실행 함수, 고차함수

• 함수 만들 때 주의

1. 함수 부수 효과를 최대한 억제

• console, API 호출 등 부수 효과는 피할 수 없는 요소지만 최대한 억제할 수 있는 방향으로 설계해야함

2. 가능한 한 함수를 작게 만들어라
3. 누구나 이해할 수 있는 이름을 붙여라

1.3 클래스
자바스크립트에서 클래스는 특정한 객체를 만들기 위한 일종의 템플릿
특정한 형태의 객체를 반복적으로 만들기 위해 사용되는 것

1. constructor

• 객체를 생성하는 데 사용하는 메서드로 단 하나만 존재

2. 프로퍼티

• 클래스로 인스턴스를 생성할 때 내부에 정의할 수 있는 속성값

3. getter, setter

• getter란 클래스에서 값을 가져올 때 사용(get 키워드), setter란 클래스 필드에 값을 할당할 때 사용(set 키워드)

4. 인스턴스 메서드

• 클래스 내부에서 선언한 메서드(프로토타입 메서드로 불리기도 함)

5. 정적 메서드

• static을 사용하고 인스턴스를 생성하지 않아도 사용할 수 있음
• new 선언 없이 class 이름에서 함수를 가져와 사용 가능

6. 상속

• 기존 클래스를 상속받아 자식 클래스에서 기존 클래스를 확장하는 개념

1.4 클로저
클로저는 함수와 함수가 선언된 어휘적 환경

변수의 유효 범위, 스코프

1. 전역 스코프

• 전역 레벨에서 선언

2. 함수 스코프

• 함수 레벨에서 선언
• 자바스크립트는 기본적으로 함수 레벨 스코프를 따름

• 리액트에서의 클로저

  • 클로저를 활용하면 전역 스코프의 사용을 막고, 개발자가 원하는 정보만 원하는 방향으로 노출시킬 수 있다는 장점이 있지만 비용이 발생함
  • 클로저는 생성될 때마다 그 선언적 환경을 기억해야 하기 때문에 비용이 발생함

  1.5 이벤트루프, 비동기 통신의 이해
  자바스크립트는 싱글스레드 언어로서 작업을 직렬 방식으로 처리하지만 비동기 처리로 병렬 방식으로 처리가 가능함

1. 프로세스 - 프로그램을 구동해 프로그램의 상태가 메모리상에서 실행되는 작업 단위

• 하나의 프로그램 실행은 하나의 프로세스를 가짐

2. 스레드 - 프로세스보다 더 작은 실행 단위

• 하나의 프로세스에는 여러 개의 스레드를 만들 수 있고, 스레드끼리 메모리를 공유할 수 있음

3. 자바스크립트가 싱글스레드 언어인 이유

• 멀티 스레드는 여러 작업을 수행할 때 같은 자원을 공유함으로써 동시성 문제가 생길 수 있음
• DOM을 조작하는 자바스크립트가 멀티 스레드로 동작하면 DOM에 큰 문제를 발생시킬 가능성이 있음

4. 비동기 통신

• 자바스크립트는 Run-to-completion(하나의 코드가 실행하는 데 오래 걸리면 뒤이은 코드가 실행되지 않는다는 의미) 특징을 갖고 있음
• 그러나 동기적으로만 동작하면 웹페이지에서는 아주 큰 단점이 될 수도 있음
• 비동기적인 동작을 통해 여러 작업을 동시에 수행할 수 있음

5. 이벤트 루프

• 자바스크립트 런타임 외부에서 자바스크립트의 비동기 실행을 돕기 위해 만들어진 장치
• 이벤트 루프의 역할은 호출 스택에 실행 중인 코드가 있는지, 태스크 큐에 대기 중인 함수가 있는지 반복해서 확인

6. 호출 스택

• 자바스크립트에서 수행해야 할 코드나 함수를 순서대로 담아두는 스택

7. 태스크 큐

• 실행해야 할 태스크의 집합
• 태스크 큐는 큐의 형태가 아닌 set의 형태를 띠고 있음
• 비동기 함수의 콜백 함수나 이벤트 핸들러 등
• 비동기 작업은 메인 스레드가 아닌 태스크 큐에 할당되는 별도의 스레드에서 수행(브라우저나 Node.js의 역할)
  => 자바스크립트 코드는 싱글 스레드로 이뤄지지만 외부 API 등은 자바스크립트 코드 외부에서 실행

• 태스크 큐 - setTimeout, setInterval, setImmediate

• 마이크로 태스크 큐 - process.nextTick, Promises, queueMicroTask
  ** 마이크로 태스크 큐가 태스크 큐보다 우선권을 가짐

  1.6 리액트에서 자주 사용하는 자바스크립트 문법
  바벨 - 자바스크립트 최신 문법을 다양한 브라우저에서도 일관적으로 지원할 수 있도록 코드를 트랜스파일함

1. 구조 분해 할당
   구조 분해 할당이란 배열 또는 객체의 값을 분해해 개별 변수에 즉시 할당하는 것
   배열 구조 분해 할당은 ES6부터 객체 구조 분해 할당은 ECMA 2018에 처음 등장

• 배열 구조 분해 할당 코드와 객체 구조 분해 할당 코드를 각각 트랜스 파일해보면 객체 구조 분해 할당이 훨씬 복잡함
• 객체 구조 분해 할당은 상대적으로 번들링 크기가 크기 때문에 사용 여부에 대한 검토가 필요

2. Array 프로토타입의 메서드:map, filter, reduce, forEach
   JSX 내부 배열 조작시 자주 사용하는 메서드이고 기존 배열의 값을 건드리지 않아 안전하게 사용 가능

1.7 선택이 아닌 필수, 타입스크립트
이 책에서는 거의 타입스크립트 충신이라고 생각이 들 정도로 타입스크립트를 강력 추천함
타입스크립트란 기존 자바스크립트 문법에 타입을 가미한 것
TypeScript is JavaScript with syntax for types

자바스크립트는 타입 체크를 런타임에서 수행하지만 타입스크립트는 빌드(트랜스파일) 타임에 수행
==> 타입스크립트는 자바스크립트의 슈퍼셋으로서 함수의 반환 타입, 배열, enum 등 사용하기 어려웠던 타입 관련 작업 처리 가능

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

1. any 대신 unknown활용
   any를 사용시 타입스크립트에서 에러를 발생시키지 않고 런타임시 에러를 발생시키기 때문에 타입스크립트 이점을 없애버림
   unknown은 말 그대로 알 수 없는 값이기 때문에 타입을 좁혀나갈 수 있음

2. 타입 가드 적극 활용

- instanceof - 지정 인스턴스가 특정 클래스의 인스턴스인지 확인가능
- typeof - 특정 요소에 대한 자료형 확인
- in - property in object로 사용, 어떤 객체에 키가 존재하는지 확인하는 용도로 사용
- 제네릭 - 함수나 클래스 내부에서 단일 타입이 아닌 다양한 타입에 대응할 수 있도록 도와줌,
=> 리액트에서 제네릭을 사용하는 곳은 useState => useState에 제네릭 타입 선언시 기본값 선언을 좀 더 명확하게 할 수 있음
- 인덱스 시그니처 - 객체의 키를 정의하는 방식

• 타입스크립트 전환 가이드

• tsconfig.json 작성

  1. outdir - .ts 나 .js가 만들어진 결과를 넣어두는 폴더, tsc는 타입스크립트를 자바스크립트로 변환하는 명령어인데 tsc 사용시 결과물이 outdir로 넘어감
  2. allowJs는 .js 파일을 허용할 것인지 여부
  3. target에는 결과물이 될 자바스크립트 버전을 지정
  4. include에는 트랜스파일 할 자바스크립트와 타입스크립트 파일을 지정

• JSDOc, @ts-check 활용하여 점진적 전환

• 타입 기반 라이브러리 사용 위한 @types 모듈 설치

• 파일 단위로 전환