[Learning React] 2장 - 리액트를 위한 자바스크립트

2.0 리액트를 위한 자바스크립트

  - 초기 JS는 웹 페이지에 상호작용 추가하기 위해 만들어진 용도

  - ECMAScript

    - ES5: 2009년, 새로운 배열 처리 메서드, 객체 프로퍼티, JSON 지원 라이브러리 등

    - ES6 (ES2015)

    - ESNext (현재 제안 단계): 향후 자바스크립트 명세에 들어갈 요소

2.1 변수 선언하기

  - ES2015 전까지는 var 사용

  - const 키워드

    - 상수: 값을 변경할 수 없는 변수

    - 상수에 값 재할당 불가 (TypeError 발생)

  - let 키워드

    - JS는 Lexical Variable scoping 지원

    - 변수의 영역을 코드 블록 안으로 한정시킬 수 있음

    - 블록 안에서 글로벌 변수 보호 가능

  - 템플릿 문자열

    - 문자열 concatenation 대신 사용 가능

    - 문자열 중간에 변수 삽입 가능

    - 공백(빈칸, 탭, 개행 등) 유지

    - 코드에 이해하기 쉽게 잘 정렬한 HTML 삽입 가능

2.2 함수 만들기

  - 함수 선언

    - function 키워드 사용

    - 함수 호이스팅 발생

  - 함수 표현식

    - 익명 함수 표현식

    - 변수에 값 대입 가능

  - 디폴트 파라미터

    - ES6, 어떤 타입의 값이라도 디폴트 매개변수 값으로 사용 가능

  - 화살표 함수

    - ES6

    - this 바인딩 주의!

      - 화살표 함수는 항상 새로운 this 영역을 만들어내지 않음

      - 상위 스코프의 this 참조

2.3 자바스크립트 컴파일하기

  - 컴파일링; 새로운 기능이 제대로 작동하도록 보장하는 유일한 방법은

    브라우저에서 코드를 실행하기 전에 더 호환성이 높은 코드로 변환하는 것 (바벨)

    - 기계어로 컴파일하는 것이 아니라 다른 버전의 JS 구문으로 변환

    - JS 컴파일은 보통 웹팩이나 파슬과 같은 자동화된 빌드 도구에 의해 처리됨

2.4 객체와 배열

  - 구조 분해를 사용한 대입

    - 디스트럭쳐링

    - 원본은 보존됨

  - 배열 구조 분해하기

    - 배열을 구조 분해해서 값을 뽑아낼 수 있음

    - 리스트 매칭: 불필요한 값을 콤마를 사용해 생략하는 것

  - 객체 리터럴 개선

    - 구조를 다시 만들어내는 과정, 내용을 한데 묶는 과정

  - 스프레드 연산자

    - 배열의 내용 조합 가능

    - 배열의 원소 복사하여 원본 보존

    - 함수의 인자를 배열로 모을 수도 있음 => Rest parameter (나머지 매개변수)

2.5 비동기 자바스크립트

  - 단순한 프라미스와 fetch

    - fetch(URL)

    - 프라미스; 자바스크립트에서 비동기적인 동작을 잘 처리할 수 있게 해줌

      - pending 프라미스(대기 중인 프라미스); 데이터 도착하기 전의 상태 표현

  - async/await

    - 프라미스 다음에 있는 코드를 실행하기 전에 프라미스가 끝날 때까지 기다리라고 명령할 수 있음

    - try ... catch 문을 이용하여 오류 처리

  - 프라미스 만들기

2.6 클래스

  - 함수를 사용해 컴포넌트 구성

  - JS는 프로토타입을 사용한 상속 방법 (Prototypical Inheritance) 이용

  - 함수는 객체이며 상속은 프로토타입을 통해 처리됨

  - ES6 클래스는 단지 프로토타입 구문에 대한 구문적 편의 (Syntactic sugar) 제공

2.7 ES6 모듈

  - 모듈: 재사용 가능한 코드 조각

  - 커먼 JS

    - 모든 버전의 노드에서 지원하는 일반적인 모듈 패턴

    - module.exports

    - import문 대신에 require 함수를 통해 모듈 임포트 가능

---