Export & Import, Spread & Rest Operatiors

 

export / export default  차이점

---

export default는 import 키워드 뒤에 어떤 이름을 쓰든, export 파일에서 내보낸 객체를 참조한다.

그냥 export로 내보낸 경우에는 중괄호, 변수명, 파일명 모두를 써줘야 한다. 이것을 named export라고 한다.

named export의 하나로, as로 별명을 붙여 사용하거나 * as bundled로 한 파일의 모든 export 변수를 사용할 수도 있다.

전체를 번들로 가져오면, bundled.번수명 이렇게 . 으로 객체에서 하나씩 뽑아 쓴다.

 

모듈 쓴다고 타입을 정해줘야지 임포트, 익스포트를 사용할 수 있다.

 

https://www.udemy.com/course/best-react/learn/lecture/28517095#overview

https://www.udemy.com/course/best-react/learn/lecture/28517095#overview

 

 

 

 

 

Spread & Rest Operatiors

---

https://hereheeam.tistory.com/32

 

 

✔️ Spread Operator

배열, 객체의 모든 요소를 대신해서 사용.  모든 속성 값을 꺼내서 새 객체의 요소, 키값으로 추가함.

const newArr = [...oldArr, 1, 2] //oldArr의 요소에 1, 2를 추가한 배열을 newArr에 할당

const newObj = {...oldObj, newProp:5} // oldObj의 속성들에 newProp을 추가한 객체를 newObj에 할당
// oldObj에 새로운 속성이 추가되면 newProp:5로 덮어쓰여진다

📌 Spread Operator로 복사한 객체(배열)은 1depth의 값에서만 깊은 복사를 실행한다.

깊은 복사와 얕은 복사 참고할 글

https://velog.io/@min1378/%EA%B0%9D%EC%B2%B4%EC%9D%98-%EC%96%95%EC%9D%80-%EB%B3%B5%EC%82%AC-vs-%EA%B9%8A%EC%9D%80-%EB%B3%B5%EC%82%AC

 

 

 

✔️ Rest Operator

함수의 인수 목록을 배열로 합침

function sortArr (...args) {
return args.sort
}

매개변수가 몇 개이든 무한대로 받아 배열로 통합한다.

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

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

위 코드를 실행 했을 때, console에는 [1]이 찍힌다.

인수로 숫자 1,2,3이 전달됐지만, 파라미터를 Rest 연산자로(...args)써줬기 때문에 함수에 [1,2,3] 처럼 배열의 형태로 바뀌어 전달되기 때문이다. 때문에 리턴 역시 배열의 형태로 나온다.