[React] export & import

🐾 export 와 export default 차이점

💁🏻‍♀️export 쓰는 이유는?

다른 파일에서 해당 코드 (함수, 변수, 컴포넌트, ....)를 이용해야 할 경우에,

export 를 할때는 반드시 {} 안쪽에다가 export할 함수나 변수나 컴포넌트 들을 콤마로 연결하면된다.
 ex) 
   export {a, b, c};

💁🏻‍♀️import 쓰는 이유?

다른 파일에서 export된 코드를 사용할 경우에,

import 할때는 반드시 {}를 써서 import 를 해야하며
export 된 대상 중 사용하고싶은 요소만 중괄호 안쪽에 콤마로 연결해서 받아오면 된다
ex)
  import {a, c} from '경로';

d01export.js

let a = 10;

function tmp() {
   return '강수지';

}

function Test() {
   return (
       <>
           <h1>Test컴포넌트</h1>
           <p>Test컴포넌트 만들었습니다</p>
       </>
   )
}

function Test2() {
   return (
       <h1>default로 export한 컴포넌트</h1>
   );
}


//다른 파일에서 함수, 변수, 컴포넌트를 사용할수 있도록 export 하기
export { a, tmp, Test };
export default Test2;

d02import.js

import {a} from './d01export';

🐾 javascript 기능

객체를 쉽게 만들수있는 방법

 {키:value, 키:value}
 {키:변수, 키:변수}

만약 설정한 키값과 value 로 설정하려 하는 변수의 이름이 서로 같다면,

 {변수, 변수}

이런식으로 축약해서 만들수있다.

 let a =10;
 let b ='홍길동';
 let target = {a, b};
 target은??객체
 target안에 있는 key
  a
  b
 target.a
 10
 target.b
 '홍길동'

🐾 구조분해 할당

구조화되있는 데이터(객체,배열)를 분해하여 각각의 변수에 할당하겠다

{
     title:'대모험',
     page:20,
     writer:'김철수',
     like:36,
     age:20
}

let writer =tmp.writer;
let like = tmp.like;

let {writer,like} =tmp;
console.log(writer)  //김철수
console.log(like)  //36

여러개의 값이 저장되어있는 객체 속에서 변수에다가 값을 저장하고 싶을때

ex)
 변수 like 에서 36 을
 변수 writer 에서 '김철수'를 할당하고 싶다.

🐾 배열 구조분해 할당

 let arr = [10, 20, 30, 40, 50, 60, 70];

 let a = arr [0]
 let b = arr [1]
 let c = arr [2]

 let [a,b,c] = arr;

🐾 export default?

기본값으로 내보내겠다
한개만 기본값으로 설정할 수 있음
{}를 사용하지 않고 내보내기가 가능

ex)
  export default a;

🐾 import

중괄호를 사용하지 않고 import 할 수 있으며
export된 이름하고 다른 이름으로 import 할수 있다
ex)
import abc from '경로';