숨니의 개발일지

기존 자바스크립트에서는 호이스팅(Hoisting)이 되는 관계로 변수나 함수가 전역에서 사용될 수 있었기 때문에

이름으로 충돌을 일으키는 경우가 많아서 모듈시스템을 이용하기 어려웠다.

호이스팅(Hoisting)이란 : 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되어 끌어올려지는것을 말한다.

기존 코드 : 변수 x 선언 및 할당을 해주었다.

첫번째 console.log(x)실행 결과를 보면 에러가 뜨는 것이 아니라 undefined 로 나오는 것을 볼 수 있는데

그 이유는 호이스팅 된 코드를 보면 이해가 쉽다.

function getX(){
 console.log(x);	// undefined
 var x = 100;
 console.log(x);	// 100
}
getX();

호이스팅 된 코드 : 실행 순서대로 재정리 

선언과 할당부분이 나눠지고 함수 내 최상단으로 선언부가 끌어올려진것을 볼 수 있다.

이렇게 되면 전역변수가 되고, 그로인해 에러가 아닌 undefined 가 나온것이다.

function getX(){
 var x;
 console.log(x);
 x = 100;
 console.log(x);
}
getX();

이런 문제를 해결하기 위해 ES6에서는 모듈시스템(export, import)로 모듈을 손쉽게 제작, 가져다 쓸수 있다.

(단, 브라우저에서 지원되고 있지 않기때문에 webpack같은 모듈 번들러를 사용해야함)

여기에서 모듈(라이브러리)이란

 - > 재사용 가능한 단위(함수,클래스,객체)들을 다른 프로그램들에서 활용할 목적으로 분리한것

import React from 'react';

class App extends React.Component {
    render(){
        return  (
            <div>
                <Header/>
                <Content/>
            </div>
        );
    }
}

export default App;

import 문법

-> import 파일이름

(다른 파일 참조)

-> import 파일이름 as 별칭

(참조한 모듈에 별칭 정하기)

-> import 기능명 from 모듈이름 

(특정 기능만 지정하여 참조하기)

react에 정의된 기능을 React라는 변수안 할당하고 Component라는 클래스에 변수이름.클래스 이름으로 접근

------------------------------------------------------ import 설명 끝, export 설명 시작

React에서 import 할 때, 하단의 코드처럼 중괄호 { } 를 써서 라이브러리를 불러오는 표현도 있다.

이 문법의 차이점은 바로 모듈을 보내주는 방식인 export에서 나온다.

import React from 'react';
import { render } from 'react-dom';

자바 스크립트의 export방식에는 3가지가 있다.

Example.js

const a = 1;

const b = 2;

export { a };

export const c = 3;

export default b;

Example2.js

import d, { a, c as e } from './Example’;

console.log(a, d, e); // 1, 2, 3

a : a는 객체에 담아서 export한다.

c: c는 선언 및 초기화와 동시에 export한다.

const 란? 변수 선언 키워드이며 동시에 상수 선언 키워드이다.

그렇기 때문에 값을 재 할당하는 것이 불가능하고,선언과 할당이 동시에 이루어져야 한다.

즉, 값이 가진 타입의 변경을 제한하겠다는 것이다.

b: b는 default를 붙여줘서 export한다.

->     a,c는 괄호 안에서 불러오고 d는 괄호 없이 불러오고 c는 as e라고 적혀있다.

        여기서 default는 기본이라는 뜻이며, default로 export한 b는 괄호를 사용하지 않아도 export할 수 있다. 

        변수 d가 변수 b를 import한 것 이라는 것을 알 수 있다.

        a와 c는 반드시 export할 때의 이름을 그대로 import해야 하며, 괄호 안에서 불어와야 한다.

        괄호 안의 변수를 바꾸고 싶다면 as라는 키워드를 사용하여 바꿀 수 있다. 

        위의 c as e라고 한 부분은 변수 c의 값을 변수 e로 넘겨준다.

        이것은 두개이상의 패키지에서 같은 변수이름을 사용해 변수가 곂칠때 유용하다.