리액트 ES6

ES6은 ECMAScript 6의 약자.

ECMAScript는 JavaScript를 표준화하기 위해 만들어졌으며 ES6은 ECMAScript의 6번째 버전으로 2015년에 발행되었으며 ECMAScript 2015라고도 한다.

 

리액트는 ES6를 사용하며 몇가지 새로운 기능에 익숙해져야 한다. 

• 클래스
• 화살표함수
• 변수 (let, const, var)
• map() 과 같은 배열메서드
• 구조화
• 모듈
• 삼항연산자
• 스프레드연산자

클래스 

클래스는 함수의 한 종류이고, function 이라는 키워드를 사용하는 대신 class키워드를 사용하고 속성은 constructor()메서드 내부에 할당된다. 클래스에서는 객체를 생성할 수도 있고, 메서드를 추가할 수도 있다. 그리고 extends키워드를 사용해, 클래스 상속을 생성할 수도 있다. 클래스 상속으로 생성된 클래스는 다른 클래스의 모든 메서드를 상속한다.

 

화살표함수

화살표 함수를 사용하면 더 짧은 함수 구문을 작성할 수 있다.

 

일반함수

화살표함수

 

화살표함수에서의 this 

화살표함수에서의 this처리는 일반함수와 다르다.

화살표함수는 this의 바인딩이 없다.

일반함수에서 this는 함수를 호출하는 객체를 의미한다. 반면 화살표함수는 항상 화살표함수를 정의한 객체를 나타낸다. (일반함수와 화살표함수의  this에 관한 자세한 설명은 추후 잡담(雑談)카테고리에 정리하겠다)

 

변수

ES6이전에는 변수를 정의하는 방법으로 var를 사용하는 방법이 있었다. 하지만 ES6에 들어서 변수를 정의하는 방법에는 var말고 let과 const 도 사용할 수 있다. 

 

배열메서드

자바스크립트에 많은 배열메서드가 있는데 그중 리액트에서 가장 유용한 것중 하나는 .map()메소드이다.

map()메서드를 사용하면 배열의 각 항목에 대해 함수를 실행하여 그 결과로 새 배열을 반환할 수 있다.

배열에서 항목 목록을 생성하면

 

이렇게 실행되는 것을 볼 수 있다.

 

구조화

위처럼 배열값에 접근하기 위해서는 배열의 인덱스 값을 일일이 적어줬어야했는데 

배열의 키의 이름을 괄호안에 적어주고 변수이름을 적어주면 각각 배열의 값에 접근할 수있게 된다.

 

 

 객체도 마찬가지이다.

위처럼 객체의 키와 값에 접근하려면 .type ,   .color와 같이 적어줘야했지만,

ES6에서는 객체의 키의 이름을 괄호안에 정의해줌으로써 바로 그 키의 값을 사용할 수 있게된다. 

 

스프레드연산자

JavaScript 스프레드 연산자( ...)를 사용하면 기존 배열 또는 개체의 전체 또는 일부를 다른 배열이나 개체에 빠르게 복사할 수 있다.

 

모듈

JavaScript 모듈을 사용하면 코드를 별도의 파일로 나눌 수 있다.이렇게 하면 코드 기반을 더 쉽게 유지 관리할 수 있다. ES모듈은 import와 export문에 의존한다.

 

export

모든 파일에서 함수 또는 변수를 export 할 수 있다. 

이와같이 개별적으로 export할 수 있고 

하단에 export를 쓰고 괄호 안에 내보내고 싶은 개체를  한번에 export할 수있다.

 

 

message.js  파일을   만들었다 .

또한 다른파일에서 내보낼때는 export default 를 사용하여 해당 모듈의 전체 개체를 export 할 수있다.

 

 

 

import 

내보낸것을 가져올 때는 import를 사용해서 가져오면 된다.

 

다른파일에서 import할 경우에는 파일의 위치를 정확히 작성해주어야 한다.

 

삼항연산자

if와 else가 단순화된 조건연산자이다.

조건문 ? (조건문이 참일때의 값) : (거짓일때의 값)

 

?뒤에는 조건문이 참 일 때 사용할 값을 적어주고

: 뒤에는 조건문이 거짓 일 때 사용할 값을 적어주면 된다.