React - 시작하기

ECMAScript 2015부터 Lexical Scope로 변경됨

Lexical Scope  : 블록내부를 {} 를 사용해 지정

- Hoisting 이 더이상 발생하지 않음

- let(변수) / const(상수) 로 구분해 지원함

 

String

문자열과 관련된 유용한 함수 추가됨

- String.startsWith(“”) : 문자열의 시작점에서 주어진 문자를 찾으면 true, 그렇지 않으면 false를 반환.

- String.endsWith(“”) : 문자열의 끝에서 주어진 문자를 찾으면 true, 그렇지 않으면 false를 반환.

- String.includes(“”) : 문자열의 어느 곳이든 주어진 문자를 찾으면 true, 그렇지 않으면 false를 반환.

- String.indexOf(“”) : 문자열에서 주어진 문자의 위치를 반환. 없으면 -1을 반환

- String.lastIndexOf(“”) : 문자열에서 주어진 문자의 가장 마지막 위치를 반환. 없으면 -1을 반환

- String.trim() : 문자열에서 좌우 끝 공백을 모두 제거함.

템플릿리터럴
 : 간단하게 문자열 만들어낼 수 있음

- 템플릿 리터럴은 따옴표(')가 아닌, 백틱(`)을 사용해 표현한다

- 백틱 내 변수 조합시 ${변수명} 사용한다

const year = 2018;
const month = 1;
const date = 16;

// 오늘은 2018년 1월 16일 입니다.
let message = `오늘은 ${year}년 ${month}월 ${date}일 입니다.`;
console.log(message);

 

functions

1. default parameters

- 함수 선언할 때 파라미터의 기본값을 정의할 수 있다

- 파라미터가 전달되지 않아 Undefined로 정의된다면, 자동으로 Default Parameter가 할당됨

2. 가변길이 파라미터

- 하나의 파라미터변수에 여러가지 값을 전달해, 배열처럼 사용할 수 있다.

- arguments 객체를 대체하기위해 설계됨

- 읽기전용 배열로 데이터 받아옴

- 가변길이 파라미터 뒤에는 다른 파라미터를 사용할 수 없다. ( 항상 마지막에 위치해야 함)

function pick(object, ...keys, next) {  // 불가능. next 는 ...keys 앞에 써줘야됨
  ...
}

3. Fat Arrow Function

- 함수를 화살표(=>) 로 정의할 수 있는 새로운 방법

- 타 언어의 Lambda와 유사(동일) - 익명함수를 만드는 새로운 방법!!

const sum = function(first, second) {  //함수 이름이 없기때문에, 익명함수!
  return first + second;
}
console.log(sum(10, 20));


==>
const sum = (first, second) => first + second;
console.log(sum(10, 20));

 

 

Extend objects

- 프로퍼티 명과 변수명이 같을 경우 프로퍼티를 생략할 수 있도록 개선됨!

function createPerson(name, age) {
  return {
    name, // 이렇게 변수명만 넣어줘도 됨! (키 이름 = 키에 할당될 값) 일 경우 이런식으로 사용가능! => "확장된 객체" 
    age
  };
}
const person = createPerson("James Dean", 30);

 

 

Object Destructuring 객체분해할당

- 객체리터럴에 있는것들을 분해해서 할당한다

- 객체리터럴이나 배열을 해체해 최소단위의 변수로 저장하는 방법

- 구조 분해시, 지정된 값이 없을 경우 undefined 로 지정됨. 이를 막기 위해 기본값(아래코드에서의 true) 할당할 수 있음.

let node = {
  type: "Identifier",
  name: "foo"
};
let {type, name, value = true} = node;
console.log(type, name, value);

- 배열의 구조분해 할당 : ...연산자 사용

colors를 펼쳐서 새로운 coloned Colors로 만들어라 (배열을 풀어헤쳐서 각 값들이 고유한 값을 가질 수 있도록 함)

1) 메모리를 해제하고  2) 값들을 복사한다(복제한다)

  =>    let[...colonedColors] = colors;

 

Promise

 

 

Modules

- 자바 스크립트 파일을 자바 패키지처럼 관리

- 스크립트 파일 내에서 원하는 함수나 변수만 골라 사용할 수 있다

- 모듈에 등록된 변수나 함수는 외부에서 자유롭게 사용할 수 없다 -> 따라서, 외부에서 사용하기 위해서는 반드시 export키워드를 사용해줘야 함(export 된 함수나변수를 외부에서 사용하려면 import 키워드 사용해야함)

-- export : 다른 모듈에 코드 일부를 노출시키기 위함(자바의 public)

-- import : export한 모듈이 있을때, import 키워드를 이용해 접근할 수 있다

- export된 변수나 함수는 필요에따라 하나 또는 여러개 또는 모두 import할 수 있다

- Export된 변수나 함수를 Import 했을 경우, 함수 및 변수 등은 모두 읽기 전용으로 바인딩 된다. (값 변경 불가능)