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 클래스의 TeacherPerson 클래스에서 상속됩니다.


모듈



모듈은 다른 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 Personexport default class person
    그런 다음 새 파일로 가져오는 동안:
    import Person , { promote } from './person.js'

    좋은 웹페이지 즐겨찾기