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 함수를 통해 모듈 임포트 가능
'Books > 러닝 리액트 ✔️' 카테고리의 다른 글
[Learning React] 6장 - 리액트 상태 관리 (0) | 2022.02.01 |
---|---|
[Learning React] 5장 - JSX를 사용하는 리액트 (0) | 2022.01.31 |
[Learning React] 4장 - 리액트의 작동 원리 (0) | 2022.01.31 |
[Learning React] 3장 - 자바스크립트를 활용한 함수형 프로그래밍 (0) | 2022.01.30 |
[Learning React] 1장 - 리액트 소개 (0) | 2021.12.11 |
댓글