[React] ES6, class, module export & import

728x90

class

class 구조

일반HTML에서는 굳이 class를 사용하진 않습니다. React의 class컴포넌트를 사용한다면 알아두세요.

객체변수
멤버변수: let, var 안써도 됨, 멤버변수는 선언하지 않아도 this.변수명 사용하면 자동생성 됨
생성자: 자바스크립트 생성자는 반드시 1개

constructor(a) {
	this.a = a;
}

함수: 변수 타입 안 적음

constructor(a) {
	this.a = a;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        //클래스
        class Person {
            //멤버변수
            name = "홍길동";
            age = 20;
            state = {a: 1};
            
            //생성자는 JS에서 반드시 1개 입니다.
            //JS는 this 키워드를 지칭하면 (선언한적이 없지만 자동으로) 멤버변수가 됩니다. 
            constructor(address) {
                this.address = address;
            }

            //함수, 맨 앞의 func가 함수 이름임
            func = () => {
                console.log("func실행");
            }
        }

        //객체로 생성 - 허용됩니다
        let p = new Person(); //객체 생성해서 p변수에 저장
        console.log(p.name);
        console.log(p.age);
        console.log(p.state.a); //state 객체(니까 .으로 접근 가능) 안의 a변수
        p.func(); //p변수 안의 함수 func 사용

        //객체생성 - 
        let p2 = new Person("서울");
        console.log(p2.address);
    </script>

</body>
</html>

class 상속

super로 반드시 연결
프로그래머가 생성자를 만들어주면 부모의 생성자와 반드시 연결 필요

set, get, static 같은 키워드로 함수를 설정 가능
set - 값을 저장하는 용도의 메서드
get - 값을 조회해서 가지고 나오는 메서드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        class Shape {
            constructor() {

            }

            func = () => {
                console.log("func호출");
            }
        }

        class Rect extends Shape { //Shape 상속 받음
            //프로그래머가 생성자를 직접 만들게 되면 super()를 통해 연결해야 합니다.
            constructor(w, h) {
                super(); //부모의 생성자 연결
                this.w = w; //멤버변수에 w저장
                this.h = h; //멤버변수에 h저장
            }

            //set - 값을 저장하는 용도의 메서드
            setW = (w) => {
                this.w = w;
            }

            //get - 값을 조회해서 가지고 나오는 메서드
            getW = () => {
                return this.w;
            }

            //set, get, statuc 같은 키워드로 함수를 설정할 수 있습니다.
        }


        //객체 생성
        let rect = new Rect();
        rect.func(); //물려받음

        //객체 생성2
        let rect2 = new Rect(10, 20);
        console.log(rect2.w); //10
        console.log(rect2.h); //20
        rect2.setW(30); //w를 30으로 저장
        console.log(rect2.getW()); //30
        
    </script>

</body>
</html>

module export import

<script> 단에서 import, export로 파일을 참조해서 사용 가능
모듈은 JS ES6의 미리 작성해 놓은 스크립트 파일로 변수, 함수, 클래스 등이 정의되어 있음
./ : 상대경로 (현재위치)

export

1. named export

이름을 직접 적어서 여러값을 export 할 때

2. default export

큰 놈 하나(단일값)를 내보낼 때

변수 export하면 .js로 밖에서 사용가능
구문 다 적고 마지막에 보내기 가능, 필요한 변수 내보내기 ▶ { } 필수

import

named import
default import
import * (다 가져오겠다) as test from './script01.js'; - 사용시 console.log(test.name); test.getInfo(); 이런식으로

1. destructuring 방식

import {가져올 이름1, 2, 3, 4} from './파일이름.js';

2. Alias 방식

import * as 임의로 정한 이름 from './파일이름.js';

3. 이름 붙여 가져오기

import {가져올 이름 as 붙일 이름, 가져올 이름 as 붙일 이름} from './파일이름.js';

실습 예제

index01.js - named export

/* 
    * 모듈 export, import

    - 모듈은 JS ES6의 미리 작성해 놓은 스크립트 파일입니다.
    - 변수, 함수, 클래스 등이 정의되어 있습니다.

    - 모듈을 내보내는 방식
    - 여러값을 내보낼 때는 named export
    - 단일값을 내보낼 때는 default export
*/

export const name = "이순신";
export const age = 20;

export const info = () => {
    console.log("이름:" + name + ", 나이:" + age);
}

let addr = "서울시";
let myInfo = () => {
    console.log(addr);
}

export {addr, myInfo};

index01.html - import

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script type="module">
        //예제에서 module을 사용하려면 type을 반드시 적어야 됩니다.

        //import1 - destructuring 방식
        import {name, age, info, addr, myInfo} from './index01.js';
        
        console.log(name); //이순신
        console.log(age); //20
        info(); //이름:이순신, 나이:20 - 함수니까 그냥 호출 가능
        console.log(addr); //서울시
        myInfo(); //서울시
        
        console.log("--------------------------------------------------------");

        //import2 - 엘리어스 방식
        import * as test from './index01.js'; //호출할 떄 test.으로 하면 됨
        
        console.log(test.name);
        console.log(test.age);
        test.info();
        console.log(test.addr);
        test.myInfo();
        console.log("--------------------------------------------------------");

        //import - 이름붙여 가져오기
        import {name as n, age as a} from './index01.js';

        console.log(n);
        console.log(a);
        </script>

</body>
</html>

HTML5파일에서 예외적으로 module을 사용할려면 type="module" 문을 반드시 작성

index02.js - default export

class Person {

    constructor(name, age) {
        this.name = name; //멤버변수
        this.age = age;
    }

    getInfo = () => {
        return `이름: ${this.name}, 나이: ${this.age}`;
    }
    
}

//default 구문은 반드시 1개여야 합니다.
export default Person;

index01.html - import

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script type="module">
        import Person from './index02.js'; //Person 밖에 없어서 구조분해 할당이 아니고 통째로 하나 가져오기
        const p = new Person('hong', 20);

       console.log(p.getInfo());
    </script>

</body>
</html>

오늘 하루

기억에 남는 부분

어려운 부분

문제 해결 부분