리액트 활용을 위한 자바스크립트 내용 간단하게 정리하기

리엑트를 활용하기 위해서 간단하게 자바스크립트의 내용을 압축해서 알아보자.

 

 

변수선언 (const, let)

Javascript의 에서 변수선언은 const, let으로 할 수 있다. let은 값을 수정할 수 있는 변수를 선언할 때 사용하고 const는 값을 수정할 수 없는 변수를 선언할 때 사용한다. 

 

그럼 일반적으로 let으로 변수를 선언하면 되지 않을까라고 생각이 들겠지만 const 키워드를 사용하면 의도치 않은 재할당을 방지를 도와주기 때문에 이를 구분하여 사용하는 것이 좋다.

const a = 1;
let b = 2;

🔖 var 선언 방식이 존재하지만 ES6에서는 호이스팅이라는 문제 때문에 추천하지 않는 방식이다. 

참고 : https://developer.mozilla.org/ko/docs/Glossary/Hoisting

호이스팅 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

 

 

 

 

 

 

모듈 내보내고 받기 (Exports와 Import)

자바스크립트에서는 여러 파일로 코드를 분할할 수 있다. 프로그램을 작성하기 위해서 여러 파일로 분할한 코드를 가져와 사용할 때 Exports와 Import가 사용된다. Exports 하는 방식이 2가지가 있는데 deafult로 내보는 방법과 name을 붙여 내보는 방법이 있다. 

 

default로 받을 때는 {}을 붙일 필요가 없지만 name을 붙여 받을 때는 {}을 붙여 받아야 한다. 

 

🖥️ person.js

const Person = {
    name: 'max'
}

export default person

🖥️ utility.js

export const clean = () => {...}
export const baseData = 10;

 

🖥️ app.js

import person from './person.js'
import prs from './person.js'

import {baseData} from './utility.js'
import {clean} from './utility.js'

 

참고 : https://ko.javascript.info/import-export

모듈 내보내고 가져오기

 

 

 

 

 

 

 

 

클래스 (Class)

자바스크립트에도 클래스가 존재한다. 클래스의 구성요소로는 메소와 프로퍼티가 있다. 해당 클래스로 인스턴스를 생성할 때에는 new 키워드를 이용하여 인스턴스를 생성한다. 

 

🖥️ class.js

class Person {
    // property
    name = "max";
    // method
    call = () => {...}
}

const heaon = new Person();

-

생성자를 사용할 때에는 클래스 안에 constructor() 키워드를 이용한다. 

 

🖥️ class.js

class Person {
    constructor() {
        this.name = "max";
    }
    
    printMyname() {
        console.log(this.name)
    }
}

const heaon = new Person();

 

상속받을 때에는 extends 키워드를 이용한다. 

 

🖥️ class.js

class Human {
    constructor(){
        this.gender = "male";
    }
    
    printGender(){
        console.log(this.gender);
    }
}

class Person extends Human{
    constructor() {
        super(); // super()을 이용해 상속받은 부모 생성자를 받는다.
        this.name = "max";
    }
    
    printMyname() {
        console.log(this.name);
    }
}

const heaon = new Person();
heaon.printGender(); // male

 

ES7부터는 클래스에서 함수와 속성값을 나타내는 방식이 조금 달라졌다. 화살표 함수를 이용하여 클래스를 좀 더 간결하게 나타 낼 수 있다. 

 

🖥️ class.js

class Person {
    name = "max";
    
    printMyname = () => {
        console.log(this.name)
    }
}

const heaon = new Person();

 

 

 

 

스프레드, 레스트 (...)

스프레드와 레스트는... 을 이용하여 배열의 원소나 객체의 프로퍼티를 나누거나 여러 인자를 받을 때 사용하는 기술을 의미한다. 파이썬 패킹/언패킹과 비슷한 양상을 보인다.

 

스프레드의 예)

배열의 원소나 객체의 프로퍼티를 받을 때 사용한다. 

 

🖥️ main.js

const numbers = [1, 2, 3];
const newnumbers = [...nubmers, 4]; // [1, 2, 3, 4]

🖥️ main.js

const person = {
    name: 'Max'
}

const newPerson = {
    ...person,
    age: 28
} // name: 'Max', age: 28

 

레스트의 예)

여러 인자를 받을 때 사용한다. 

 

🖥️ main.js

const filter = (...args) => {
    return args.filter(el => el === 1);
} 

console.log(filter(1, 2, 3)); // [1]

 

 

 

 

 

 

 

 

구조분해할당 (Destructuring)

Destructuring은 배열의 원소나 객체의 프로퍼티를 추출해서 변수에 저장할 수 있도록 하는 기술이다. 얼핏보면 스프레드와 비슷하게 보일 수 있으나 모든 원소와 프로퍼티를 가져와서 새 배열이나 객체에 전달하는 스프레드에 반해 디스트럭쳐링은 원소나 프로퍼티를 하나만 가져와서 변수에 저장하는 것을 의미한다. 

 

🖥️ main.js

const numbers = [1, 2, 3];
[num1, num2, num3] = numbers; // num1 = 1, num2 = 2, num3 = 3