스프레드 구문 / React / NodeJS
🔴 스프레드 구문 ( 여기서부터 진도 )
- 배열이나 객체에 이용할 수 있는 표기법 … 이 기본 구문이며, 의미는 배열의 요소를 하나하나 풀어놓을 수 있다.
```javascript const a = [1, 2, 3]; const b = […a, 4, 5];
console.log(b); // [1,2,3,4,5]
1
2
3
4
5
6
7
8
9
배열 b는 배열 a의 배열 요소들을 포함하였다.
이는, 객체에서도 가능하다.
```javascript
const user = { name: "철수", age: 20};
const newUser = { ...user, job: "학생"};
console.log(newUser);
// { name: "철수", age: 20, job: "학생" }
🟠 복사
복사 또한 가능하다.
1
2
3
4
5
6
7
8
9
const a = [1, 2];
const b = a; // const b = [...a];
a[0] = 100;
console.log(a);
console.log(b);
// a의 배열을 바꾸었기에 a는 100, 2가 있고
// b 또한 a의 배열 요소를 따라가 만들어져 값은 같다.
같은 키가 존재한다면, 후에 선언된 것이 덮어쓰게 됨.
1
2
3
4
const a = { x: 1 };
const b = { x: 10 };
{ ...a, ...b } // { x: 10 }
🟠 병합
병합 또한 가능하다.
1
2
3
4
5
const a = { x: 1 };
const b = { y: 2 };
const c = { ...a, ...b };
// { x: 1, y: 2 }
같은 키가 존재한다면, 후에 선언된 것이 덮어쓰게 됨.
1
2
3
4
const a = { x: 1 };
const b = { x: 10 };
{ ...a, ...b } // { x: 10 }
🔴 객체 생략 표기법 ( shorthand )
객체의 속성명과 설정할 변수명이 같으면 값 명시를 생략할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
const name = "choco";
const age = 6;
const user = {
// 상기 정의한 변수와 객체 내의 속성의 이름이 같아 객체 생략 가능
name,
age,
};
console.log(user);
// {name: "choco", age: 8}
🔴 map
배열의 각 요소를 하나씩 변환해서, 새로운 배열을 만드는 함수이다. map은 사용자 정의 함수라고도 함. 따라서 우리가 map 함수의 기능을 정의하여 사용하는 함수라고 보는게 맞을듯
1
2
3
4
5
const nameArr = ["초코", "아미", "쭈나"];
for (let idx = 0; idx < nameArr.length; idx++) {
console.log(nameArr[idx]);
}
기존의 배열을 하나씩 출력하면 제어면에서는 세밀하지만 코드가 길고, 인덱스 조건을 잘못 사용하면 버그가 날 위험성이 있다.
map 함수를 이용하면 다음처럼 새 배열을 만들 수 있다.
1
2
3
4
5
6
7
const nameArr = ["초코", "아미", "쭈나"];
const nameArr2 = nameArr.map((name) => {
return name;
});
console.log(nameArr2); // ["초코", "아미", "쭈나"]
nameArr의 각 요소를 하나씩 name으로 받아 새로운 배열을 생성하였다.
의의는 map으로 배열의 각 요소를 가공해 새 배열을 만들 때 사용하며,
for문보다 의도가 명확하고 불변성을 지킨다는 점에 있다.
🟠 index
map 안의 함수는 두 번째 인수를 넣을 수 있고, 넣는 위치에 기반하여 0부터 index를 매긴다.
1
2
3
4
5
6
7
8
9
10
const arr = ['a', 'b', 'c'];
arr.map((value, index) => {
console.log(value, index);
});
/*
a 0
b 1
c 2
*/
화살표 함수 표기에 대해 좀 더 이해가 필요할듯..
🔴 filter 함수와 map 함수의 차이
map 함수와 같이 배열을 순회한다는 점은 같지만, 차이가 있다.
map
- 모든 요소를 변형하여 새 배열로 만든다
- 개수는 원본과 항상 같다.
filter
- 조건에 맞는 것만 골라서 새 배열로 만든다.
- 개수는 줄어들 수 있음 ```javascript const numArr = [1,2,3,4,5];
const newNumArr = numArr.filter((num)=>{ return num % 2 === 0; // 배열엔 짝수만 남게 된다. });
console.log(newNumArr); // [2, 4] ```
🔴 최신 문법 내용 [ES2020~ES2022]
🔴 React.js
브라우저에서 간단한 연산 및 시각적인 효과를 주는 단순한 스크립트였던 JS
- slack, Atom, VSC 등 데스크톱 어플리케이션 ( Electron )
- facebook, Discord, Paypal, Ebay 등 이 부분은 오 이걸 이걸로 만들었구만 이정도.
우선, 리액트는 웹사이트를 구축할 때 사용하는 JS UI 라이브러리
SPA를 쉽고 빠르게 만들 수 있도록 해주는 도구 - 오직 View만 신경쓰는 라이브러리
리액트는 모든 페이지가 컴포넌트로 구성, React Native를 추가로 학습해 모바일 앱을 개발할 수 있다.
🟠 특징
- Virtual DOM 사용
- 컴포넌트 기반 구조
- React Native 학습으로 인한 모바일 앱 개발 가능
- 기타
🟠 단점
- 방대한 학습량
- 높은 상태 관리 복잡도
🔴 노드 JS (node.js)
리액트를 브라우저가 아닌 곳에서 사용하기 위해서는 Node.js가 필수이다. ( 따라서 설치 )
react-code-snippet ESLint - 문법적으로 잘못된 부분, js를 사용할 때 많이 쓰는 확장 중 하나 Prettier - 코드 포매터, 코드를 전체적으로 정한 부분으로 맞춰줌
- rcc, rsc, rsf 맞춰볼 포맷
node 모듈도 아파치톰캣처럼 서버라 비슷하다.
create-react-app 에 대한 설명 및 실습
- 그리고 html, js 의 관계에 대해 처음나온화면이 어떻게 렌더링되었는가에 대해 설명하였다.
JSX
Javascript Syntax Extenstion - 자바스크립트 확장 문법 JS와 XML/HTML 을 합친 것 const element = <h1>Hello, world!</h1> 결국 이걸 JS로 변환시켜주는 것
createelement() - JSX 차이 등. 까지 했음