React ES6

ES6란?

ES6는 ECMAScript 6의 약자입니다.

ECMAScript는 JavaScript를 표준화하기 위해 작성되었으며, ES6는 ECMAScript의 6번째 버전으로 2015년에 발행되었으며 ECMAScript 2015라고도 합니다.

왜 ES6를 배워야하는가?

React는 ES6를 사용하며 다음과 같은 몇 가지 새로운 기능을 숙지해야 합니다.

클래스
화살표 함수
변수 (let, const, var)
배열 함수
Destructuring
Modules
삼 연산자
확산 연산자

React ES6 클래스

클래스

클래스는 함수의 한 종류이지만 키워드 함수를 사용하여 시작하는 대신 키워드 클래스를 사용합니다. 속성은 constructor() 메서드 내에 할당됩니다.

예제 1 - constructor

class Car {
  constructor(name) {
    this.brand = name;
  }
}

클래스 이름의 대소문자에 주의해 주세요. 이름 “Car”는 대문자로 시작했습니다. 이것은 클래스의 표준 명명 규칙입니다.

이제 Car 클래스를 사용하여 객체를 만들 수 있습니다.

예제 2 - Car 클래스로 myCar 객체 생성

class Car {
  constructor(name) {
    this.brand = name;
  }
}

const myCar = new Car("Ford");

Note: 생성자 함수는 객체가 초기화되면 자동으로 호출됩니다.

클래스에서의 메서드

클래스에 독자적인 메서드를 추가할 수 있습니다.

예제 3 - present 메서드 생성

class Car {
  constructor(name) {
    this.brand = name;
  }
  
  present() {
    return 'I have a ' + this.brand;
  }
}

const mycar = new Car("Ford");
mycar.present();

위의 예에서 볼 수 있듯이 오브젝트의 메서드 이름 뒤에 괄호를 붙여 메서드를 호출합니다(파라미터는 괄호 안에 들어갑니다).

클래스 상속

클래스 상속을 작성하려면 extens 키워드를 사용합니다.

클래스 상속으로 생성된 클래스는 다른 클래스의 모든 메서드를 상속합니다.

예제 4 - Model 클래스에 Car 클래스 상속

class Car {
  constructor(name) {
    this.brand = name;
  }

  present() {
    return 'I have a ' + this.brand;
  }
}

class Model extends Car {
  constructor(name, mod) {
    super(name);
    this.model = mod;
  }  
  show() {
      return this.present() + ', it is a ' + this.model
  }
}
const mycar = new Model("Ford", "Mustang");
mycar.show();

super() 메서드는 부모 클래스를 참조합니다.

constructor 메서드에서 super() 메서드를 호출함으로써 부모 constructor 메서드를 호출하고 부모 속성 및 메서드에 액세스합니다.

React ES6 화살표 함수

화살표 함수

화살표 함수를 사용하면 보다 짧은 함수 구문을 쓸 수 있습니다.

ES6 이전

hello = function() {
  return "Hello World!";
}

화살표 함수 사용

hello = () => {
  return "Hello World!";
}

코드가 짧아졌습니다! 함수에 구문이 1개만 있고 구문이 값을 반환하는 경우 괄호 및 return 키워드를 삭제할 수 있습니다.

화살표 함수 디폴트 반환 값

hello = () => "Hello World!";

이것은 함수에 구문이 1개 밖에 없는 경우에만 기능합니다.

파라미터가 있는 경우 괄호 안에 전달합니다.

파라미터가 있는 화살표 함수

hello = (val) => "Hello " + val;

파라미터가 1개밖에 없는 경우 괄호도 생략할 수 있습니다.

괄호 없는 화살표 함수

hello = val => "Hello " + val;

`this` 의 차이

this 의 처리도 일반 기능과 화살표 기능이 다릅니다.

즉, 화살표 기능에서는 this 의 바인딩은 없습니다.

일반 함수에서 this 키워드는 함수를 호출한 객체(window, document, button 등)를 나타냅니다.

화살표 함수의 경우 this 키워드는 항상 화살표 함수를 정의한 객체체를 나타냅니다.

차이를 이해하기 위해 두 가지 예를 살펴보겠습니다.

두 예 모두 페이지가 로드될 때 메서드를 두 번 호출하고 사용자가 버튼을 클릭할 때 메서드를 다시 호출합니다.

첫 번째 예에서는 정규 함수를 사용하고 두 번째 예에서는 화살표 함수를 사용합니다.

그 결과 첫 번째 예에서는 두 개의 다른 오브젝트(window과 button)가 반환되고 두 번째 예에서는 Header 오브젝트가 두 번 반환됩니다.

일반 함수의 경우 `this` 는 함수를 호출한 객체를 나타냅니다.

class Header {
  constructor() {
    this.color = "Red";
  }

//Regular function:
  changeColor = function() {
    document.getElementById("demo").innerHTML += this;
  }
}

const myheader = new Header();

//The window object calls the function:
window.addEventListener("load", myheader.changeColor);

//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);

화살표 함수에서 `this` 는 함수를 호출한 사용자에 관계없이 Header 객체를 나타냅니다.

class Header {
  constructor() {
    this.color = "Red";
  }

//Arrow function:
  changeColor = () => {
    document.getElementById("demo").innerHTML += this;
  }
}

const myheader = new Header();


//The window object calls the function:
window.addEventListener("load", myheader.changeColor);

//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);

함수로 작업할 때는 이러한 차이점에 유의하십시오. 경우에 따라서는 통상의 함수의 동작이 필요한 경우가 있습니다. 그렇지 않은 경우는 화살표 함수를 사용합니다.

React ES6 변수

변수

ES6 이전에는 변수를 정의하는 방법은 var 키워드를 사용하는 방법 뿐이었습니다. 정의하지 않으면 글로벌 오브젝트에 할당됩니다. strict 모드가 아닌 경우 변수가 정의되지 않은 경우 오류가 발생합니다.

ES6에서는 변수 var, let 및 const의 세 가지 변수를 정의할 수 있습니다.

var

var x = 5.6;

함수 외부에서 var를 사용하는 경우 글로벌 범위에 속합니다.

함수 내부에서 var를 사용하면 해당 함수에 속합니다.

블록 내부(예: for 루프)에서 var를 사용하는 경우 변수는 해당 블록 외부에서 계속 사용할 수 있습니다.

vardms 블록 범위가 아닌 함수 범위입니다.

let

let x = 5.6;

let은 var의 블록 범위 버전이며 정의된 블록(또는 식)으로 제한됩니다.

블록 내부(예: for 루프)에 사용하는 경우, let 변수는 해당 루프 내부에서만 사용할 수 있습니다.

let에는 블록 스코프가 있습니다.

const

const x = 5.6;

const는 일단 생성되면 그 값은 절대 변경할 수 없는 변수입니다.

const에는 블록 범위가 있습니다.

키워드 const는 약간 오해의 소지가 있습니다.

상수 값은 정의되지 않습니다. 값에 대한 지속적인 참조를 정의합니다.

이 때문에 다음 작업을 수행할 수 없습니다.

상수 값 재할당
상수 배열 재할당
상수 객체 재할당

하지만 다음 작업은 수행할 수 있습니다.

상수 배열 요소 변경
상수 객체의 속성 변경

React ES6 배열 함수

배열 함수

JavaScript 배열 방식에는 여러 가지가 있습니다.

React에서 가장 유용한 방법 중 하나는 .map() 배열 방식입니다.

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

React에서는 map()을 사용하여 리스트를 생성할 수 있습니다.

배열 함수 사용 방법

const myArray = ['apple', 'banana', 'orange'];

const myList = myArray.map((item) => <p>{item}</p>)

React ES6 Destructuring

Destructuring

Destructuring은 사용하고 있는 배열이나 객체가 있을 수 있지만, 필요한 것은 이들에 포함된 아이템의 일부만 사용합니다.

이때 Destructuring을 통해 필요한 것만 쉽게 추출할 수 있습니다.

Destructing Arrays

배열 항목을 변수에 할당하는 이전 방법은 다음과 같습니다.

ES6 이전 방법

const vehicles = ['mustang', 'f-150', 'expedition'];

const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];

변수에 배열 항목을 할당하는 새로운 방법은 다음과 같습니다.

Destructing 사용

const vehicles = ['mustang', 'f-150', 'expedition'];

const [car, truck, suv] = vehicles;

배열을 Destructing할 때는 변수가 선언되는 순서가 중요합니다.

위의 예에서 car와 SUV만 원하는 경우, truck은 생략하고 쉼표는 계속 사용할 수 있습니다.

const vehicles = ['mustang', 'f-150', 'expedition'];

const [car,, suv] = vehicles;

Destructing 기능은 함수가 배열을 반환할 때 유용합니다.

예제 1

function calculate(a, b) {
  const add = a + b;
  const subtract = a - b;
  const multiply = a * b;
  const divide = a / b;

  return [add, subtract, multiply, divide];
}

const [add, subtract, multiply, divide] = calculate(4, 7);

객체 Destructuring

함수 내의 오브젝트를 사용하는 이전 방법은 다음과 같습니다.

ES6 이전 방법

const vehicleOne = {
  brand: 'Ford',
  model: 'Mustang',
  type: 'car',
  year: 2021, 
  color: 'red'
}

myVehicle(vehicleOne);

function myVehicle(vehicle) {
  const message = 'My ' + vehicle.type + ' is a ' + vehicle.color + ' ' + vehicle.brand + ' ' + vehicle.model + '.';
}

함수 내부의 객체를 사용하는 새로운 방법은 다음과 같습니다.

Destructuring 사용

const vehicleOne = {
  brand: 'Ford',
  model: 'Mustang',
  type: 'car',
  year: 2021, 
  color: 'red'
}

myVehicle(vehicleOne);

function myVehicle({type, color, brand, model}) {
  const message = 'My ' + type + ' is a ' + color + ' ' + brand + ' ' + model + '.';
}

오브젝트 속성을 특정 순서로 선언할 필요는 없습니다.

중첩된 객체를 참조한 후 콜론과 중괄호를 사용하여 중첩된 객체에서 필요한 항목을 다시 디스트럭처 하는 방법으로 중첩된 객체를 디스트럭처 할 수도 있습니다.

예제 2

const vehicleOne = {
  brand: 'Ford',
  model: 'Mustang',
  type: 'car',
  year: 2021, 
  color: 'red',
  registration: {
    city: 'Houston',
    state: 'Texas',
    country: 'USA'
  }
}

myVehicle(vehicleOne)

function myVehicle({ model, registration: { state } }) {
  const message = 'My ' + model + ' is registered in ' + state + '.';
}

React ES6 연산자

확산 연산자

JavaScript 확산 연산자(...)를 사용하면 기존 배열 또는 객체의 전체 또는 일부를 다른 배열 또는 객체에 빠르게 복사할 수 있습니다.

예제 1

const numbersOne = [1, 2, 3];
const numbersTwo = [4, 5, 6];
const numbersCombined = [...numbersOne, ...numbersTwo];

확산 연산자는 종종 디스트럭처와 함께 사용됩니다.

첫 번째 항목과 두 번째 항목을 `numbers`에서 변수로 할당하고 나머지는 배열에 넣습니다.

const numbers = [1, 2, 3, 4, 5, 6];

const [one, two, ...rest] = numbers;

확산 연산자를 객체와 함께 사용할 수도 있습니다.

다음 두 객체를 결합합니다.

const myVehicle = {
  brand: 'Ford',
  model: 'Mustang',
  color: 'red'
}

const updateMyVehicle = {
  type: 'car',
  year: 2021, 
  color: 'yellow'
}

const myUpdatedVehicle = {...myVehicle, ...updateMyVehicle}

React ES6 모듈

모듈

JavaScript 모듈을 사용하면 코드를 다른 파일로 분할할 수 있습니다.

이것으로 코드 베이스의 유지보수가 용이하게 됩니다.

ES 모듈은 import 및 export 키워드에 의존합니다.

Export

임의의 파일에서 함수 또는 변수를 내보낼 수 있습니다.

person.js 라는 이름의 파일을 만들고 내보낼 파일을 입력합니다.

내보내기에는 Named와 Default의 두 가지 유형이 있습니다.

Named Export

named export는 각각 export 하는 방법과 한번에 export 하는 방법으로 생성할 수 있습니다.

개별적

export const name = "Jesse"
export const age = 40

한번에

const name = "Jesse"
const age = 40

export { name, age }

Default Export

message.js라는 이름의 다른 파일을 생성하여 default export에 사용합니다.

하나의 파일에 default export를 하나만 가질 수 있습니다.

default export

const message = () => {
  const name = "Jesse";
  const age = 40;
  return name + ' is ' + age + 'years old.';
};

export default message;

Import

모듈이 named export 인지 default export 인지에 따라 두 가지 방법으로 모듈에 Import할 수 있습니다.

named export는 중괄호를 사용하여 구조화해야 합니다. default export는 그렇지 않습니다.

named export import

import { name, age } from "./person.js";

default export import

import message from "./message.js";

React ES6 삼항 연산자

삼항 연산자

삼항 연산자는 if / else 와 같이 단순화된 조건부 연산자입니다.

구문: condition ? < true의 경우 표현> : < false의 경우 표현>

다음은 if / else 를 사용한 예입니다.

ES6 이전 방법

if (authenticated) {
  renderApp();
} else {
  renderLogin();
}

다음은 삼항 연산자를 사용한 동일한 예를 보여드리겠습니다.

삼항 연산자 사용

authenticated ? renderApp() : renderLogin();

React ES6

ES6란?

왜 ES6를 배워야하는가?

React ES6 클래스

클래스

예제 1 - constructor

예제 2 - Car 클래스로 myCar 객체 생성

클래스에서의 메서드

예제 3 - present 메서드 생성

클래스 상속

예제 4 - Model 클래스에 Car 클래스 상속

React ES6 화살표 함수

화살표 함수

ES6 이전

화살표 함수 사용

화살표 함수 디폴트 반환 값

파라미터가 있는 화살표 함수

괄호 없는 화살표 함수

this 의 차이

일반 함수의 경우 this 는 함수를 호출한 객체를 나타냅니다.

화살표 함수에서 this 는 함수를 호출한 사용자에 관계없이 Header 객체를 나타냅니다.

React ES6 변수

변수

var

let

const

React ES6 배열 함수

배열 함수

배열 함수 사용 방법

React ES6 Destructuring

Destructuring

Destructing Arrays

ES6 이전 방법

Destructing 사용

예제 1

객체 Destructuring

ES6 이전 방법

Destructuring 사용

예제 2

React ES6 연산자

확산 연산자

예제 1

첫 번째 항목과 두 번째 항목을 numbers에서 변수로 할당하고 나머지는 배열에 넣습니다.

다음 두 객체를 결합합니다.

React ES6 모듈

모듈

Export

Named Export

개별적

한번에

Default Export

default export

Import

named export import

default export import

React ES6 삼항 연산자

삼항 연산자

ES6 이전 방법

삼항 연산자 사용

`this` 의 차이

일반 함수의 경우 `this` 는 함수를 호출한 객체를 나타냅니다.

화살표 함수에서 `this` 는 함수를 호출한 사용자에 관계없이 Header 객체를 나타냅니다.

첫 번째 항목과 두 번째 항목을 `numbers`에서 변수로 할당하고 나머지는 배열에 넣습니다.