JavaScript ES6 리프레셔(2부)

React 학습을 위한 ES6 리프레셔

어레이 매핑

map() 메서드는 부모 배열에 있는 각 요소에 대해 특정 함수를 호출하여 배열을 만듭니다.

const colors = ["red", "blue", "green"];
const mappedArray = colors.map(color => 'Primary Color - ${color}');

어디, mappedArray = ['Primary Color - red', 'Primary Color - blue', 'Primary Color - green']
화살표 함수를 사용하여 템플릿 문자열을 사용하여 각 색상을 새 배열로 매핑합니다. 위의 코드는 템플릿 문자열과 화살표 함수를 사용하지 않고도 작성할 수 있습니다.

const mappedArray = colors.map(function(color) {
    return "Primary Color - " + color;
})

두 함수에 전달하는 color 매개변수는 배열의 특정 단일 항목입니다. 변수 이름을 지정할 수 있습니다. 예를 들어 i 대신 color

객체 구조화

객체의 값에 접근하는 일반적인 방법

const address = {
    street: '1 ABC'
    city: 'DEF',
    country: 'GHI'
}

const street = address.street
const city = address.city
const country = address.country

street, city, country는 "1 ABC", "DEF", "GHI"와 같은 값을 갖습니다.

그러나 ES6 객체를 구조화하는 방법을 사용하여

 const {street, city, country} = address

두 경우 모두 주소 개체에서 새 변수의 거리, 도시 및 국가 속성을 추출했습니다.

const {street: st} = address

여기서 우리는 주소에서 street 속성을 추출하고 st 변수에 저장합니다.

따라서 st에는 주소 개체의 거리 속성에서 추출한 "1 ABC" 값도 포함됩니다.

스프레드 연산자

Spread 연산자를 사용하면 배열을 확장할 수 있습니다. 배열을 연결하고 새 값이 거의 없는 후 다른 배열을 연결해야 할 때 가장 잘 사용됩니다.

const first = [1, 2, 3]
const second = [4, 5, 6]

const combined = first.concat(second)
const spreadCombined = [...first, ...second]

// best use case
const inBetween = [0, ...first, 10, 20, ...second, 30, 40]

스프레드 연산자는 객체에도 사용할 수 있습니다.

const one = {B: "Bhutan"}
const two = {D: "India"}

const combined = {A: "USA", ...one, C: "Canada", ...two, E: "Australia"}

클래스

여러 개체를 만드는 대신 클래스를 사용할 수 있습니다.

const person1 = {
    name: "ABC"
    walk() {
        console.log('Walk')
    }
}


const person2 = {
    name: "DEF"
    walk() {
        console.log('Walk')
    }
}

여러 객체를 선언하는 것보다 공통 속성을 가진 클래스를 갖는 것이 좋습니다.

다음과 같은 방법으로 JavaScript에서 클래스를 구현할 수 있습니다.

class Person {
    constructor(name) {
        this.name = name
    }
    walk() {
        console.log('Walk')
    }
}


//creating persons
const person1 = new Person('ABC')
person1.walk()
const person2 = new Person('DEF')
person2.walk()

계승

예를 들어 모든 교사가 걸을 수 있어야 하는 Teacher 클래스를 만듭니다. 따라서 Person 키워드를 사용하여 extends 클래스의 모든 메서드를 상속합니다.

이제 Teacher 클래스가 Person 클래스를 사용하여 extend 클래스의 속성을 상속한 후 해당 클래스의 Person 인스턴스를 생성하여 Teacher 클래스의 모든 메서드를 사용할 수 있습니다.

class Person {
    constructor(name) {
        this.name = name
    }
    walk() {
        console.log('Walk')
    }
}


class Teacher extends Person {
    teach() {
        console.log('Teach')
    }
}


const teacher1 = new Teacher('ABC ')
teacher1.teach()
teacher1.walk()

이제 Teacher 클래스의 생성자를 생성하면 super 키워드도 사용해야 합니다.

class Teacher extends Person {
    constructor(name, degree) {
        super(name)
        this.degree = degree
    }    

    teach() {
        console.log('Teach')
    }
}

super 키워드를 사용하면 name 클래스의 Teacher가 Person 클래스에서 상속됩니다.

모듈

모듈은 다른 JavaScript 파일에서 클래스 또는 함수를 가져오는 데 사용됩니다.
export 키워드는 새 JavaScript 파일로 가져올 클래스 또는 함수에 추가되어야 합니다.
src/Person.js

export class Person {
    constructor(name) {
        this.name = name
    }
    walk() {
        console.log('Walk')
    }
}


export function display(number) {
    console.log(number)
}

모듈을 사용하여 새 JavaScript 파일에서 Person 클래스 및 표시 기능 가져오기
src/teacher.js

import {Person} from './person.js'
import {display} from './person.js'

class Teacher extends Person {
    constructor(name, degree) {
        super(name)
        this.degree = degree
    }    

    teach() {
        console.log('Teach')
    }
}

const teacher1 = new Teacher('ABC ')
teacher1.teach()
teacher1.walk()

display('hello')

용법:
import {function / class name} from 'path to that js file'
참고: export 키워드는 함수나 클래스 앞에 추가해야 합니다.

기본 및 명명된 내보내기

클래스나 함수 앞에 default 키워드와 함께 export 키워드를 추가하면 기본 내보내기

라고 합니다.

기본 내보내기는 다음과 같이 가져옵니다.

import ... from 'path to js file'

그리고 Named 내보내기는 다음과 같이 가져옵니다.

import { ... } from 'path to js file'
위의 예에서 default를 추가하면
export class Person → export default class person
그런 다음 새 파일로 가져오는 동안:
import Person , { promote } from './person.js'