[ React ] 시작전 알면 좋을 Javascript 문법

리액트 매번 혼자 끄적이다가 생각보다 감이 잘 안오고 게을러서 그런지

매번 시작을 안하고 있다가 이번에 강좌를 구매했다 :)

리액트 시작전 알면 좋은 Javascript 개념 몇가지를 정리해 놓으려고한다 🙂

 

화살표 함수

[ 기존 ] function sayHello ( name ) { return name; }

[ 화살표 함수 ] const sayHello = ( name ) => { return name; }

* 매개변수가 하나일 경우 괄호 생략 가능 ex) name => { return name; }

* 중괄호 생략시 자동 return ex) name => name;

 

 

Template Literals

[ 기존 ] const sayHello = name => { return "Hello " + name; }

[ Template Literals ] const sayHello = name => { return `Hello ${name}`; }

 

 

Object Destructuring

[ 기존 ] 

const apple = {

    color: "red",

    price: 1000,

    type: "fruit"

    favFruit: {

        name: "peach",

        taste: "sweet"

    }

}

const color = apple.color;

const price = apple.price;

 

[ Object Destructuring ]

const { color, price, type: title, favFruit: {name, taste} } = apple;

* apple.type을 가져와서 title이라는 변수로 지정

* 중괄호는 해당 오브젝트 안으로 들어가는것, 없다면 변수명 지정

 

 

Spread Operator

const days = ["Mon", "Tues", "Wed"];

const otherDays = ["Tue", "Fri", "Sat"];

 

[ 예시1 ] 

const allDays = days + otherDays ; // 출력 : Mon, Tues, Wed, Tue, Fir, Sat ( 문자열 출력 )

[ 예시2 ]

const allDays = [days + otherDays]; // 출력 : ["Mon, Yues, Wed, Tue, Fri, Sat"]

[ 예시3 ]

const allDays = [days, otherDays]; // 출력 : [ Array[3], Array[4] ]

[ Spread Operator ]

const allDays = [...days, ...otherDays]; // 출력 : ["Mon", "Tues", "Wed", "Tue", "Fri", "Sat"]

 

 

 

Class

class student () {
    constructor(name) {
        this.name = name;
    }

    introduce () {
        console.log(`My name is ${this.name}`);
    }
}