[React] Udemy 강의 노트 2

섹션 2 : 자바스크립트 새로고침

 

모듈 소개

- 리액트 앱은 자바스크립트 ES6와 차세대 기능을 사용

- 좀 이상해 보일 수 있음

- 자바스크립트는 아주 빠르게 진화 중

 

변수 let과 const 이해하기

- 변수를 생성하는 방식

- 변하지 않은 변수를 상수라고 함

- var 대신 let, const 권장

- let 수정할 수 있는 변수

- const 수정할 수 없는 (절대 변하지 않는 상수) 변수

- const에는 새로운 값을 할당할 수 없음 constant variable

화살표 함수

- 생성자 함수

- 자바스크립트를 생성하는 또다른 구문

- const 선언

- const myFunction = () => { }

- this로 인해 생성된 문제를 해결

- this는 항상 원하는 객체를 보지 않지만 화살표 함수를 사용하면 this는 원하는 객체를 바라보게 됨

- 인수가 1개라면 ()는 생략할 수 있다.

- 인수가 없으면 ()는 빈 상태로 두고 생략해서는 안된다.

- 때에 따라 return을 제거해 화살표 함수를 짧게 축약할 수 있다.

Exports와 Imports

- 차세대 자바스크립트는 모듈 방식의 코드를 작성

- 코드를 여러 개로 나누고 올바른 순서로 코드를 가져올 수 있다.

- default 키워드 사용해서 export 하면 import 할 수 있다.

- default 키워드 사용하면 언제나 파일에서 export default 한 것을 import 하게 된다.

- default 키워드를 사용하지 않으면 import 한 파일에서 특정한 어떤 것을 정확하게 가리키기 위해 {}를 사용한다.

- {}를 named export 라고 한다.

- {} 안에는 ,를 이용해 여러 개를 불러올 수 있다.

- 또는 as를 이용하거나 *를 이용하여 상수로 선언된 자바스크립트 자료형을 불러올 수 있다.

클래스 이해하기

- 객체를 위한 핵심 청사진

- class 키워드로 정의된다. 

- 프로퍼티와 메소드로 구성된다.

- property는 클래스에 정의한 변수

- method는 클래스에 정의한 함수

- new 키워드로 class를 생성한다.

- 클래스에서는 상속을 사용할 수 있다.

- 가장 간단하게 프로퍼티 형태를 만드는건 construnctor 생성자 함수를 추가하는 것

- 메소드는 메소드의 이름 다음에 중괄호를 넣어서 만든다

- this 키워드로 프로퍼티를 설정

- extends 를 이용해 확장할 수 있다.

- 서브 클래스에서는 super 생성자를 호출해야 함

 

클래스, 속성 및 메서드

- 차세대 자바스크립트에서는 프로퍼티와 메소드를 초기화 하는 다양한 방법을 제공

- 프로퍼티는 클래스와 객체에 추가되는 변수

- 메소드는 클래스와 객체에 추가되는 함수

- 프로퍼티와 생성자 함수를 설정하는 this 구문

- 클래스에 바로 프로퍼티를 할당할 수 있다. (생성자 함수 호출 x)

- 메소드는 값으로 함수를 저장하는 프로퍼티

- 화살표 함수 사용 : 프로퍼티의 값으로 화살표함수를 사용하기 때문에 this 키워드를 사용하지 않는다.

 

스프레드 및 나머지 연산자

- 둘 다 '...' 로 생김

- 스프레드 연산자는 모든 프로퍼티와 값을 꺼내서 복사한다.

- 모든 원소와 프로퍼티를 가져와서 새 배열이나 객체에 전달한다.

- 레스트 연산자는 함수에서 사용된다.

- 인자로 ...를 붙인 배열이나 객체를 전달한다.

 

구조분해할당(Destructuring)

- 배열의 원소나 객체의 프로퍼티를 추출해서 변수에 저장하게 해준다.

- 스프레드 연산자와 다르다.

- 원소나 프로퍼티를 하나만 가져와서 변수에 저장한다.

 

참조형 및 원시형 데이터 타입

- number,string 등은 기본형이고 객체와 배열은 참조형이다.

- 객체 person은 메모리에 저장되어 있고, 상수 person에는 메모리에 있는 주소를 가리키는 포인터를 저장

- person을 새로운 변수에 할당하면 포인터가 복사된다. 이 포인터는 메모리에 저장된 person을 바라본다.

- 이 때 스프레드 연산자를 사용하면 복사본을 생성하기 때문에 포인터를 더이상 참조하지 않는다.

 

배열 함수 새로고침

- .map(()=>{})

- 배열의 각 원소에서 함수가 실행된다.

- 맵은 예전 값을 새 값으로 반환한다.