ES6 템플릿 문자열
let string1 = "안녕하세요";
let string2 = "반갑습니다";
let greeting = `${string1} ${string2}`;
console.log(greeting);
let product = { name: "book", price: "42$" };
let message = `product ${product.name}의 price는 ${product.price}`;
let value1 = 1;
let value2 = 2;
var boolValue = false;
var operator1 = `곱셈값은 ${value1 * value2} 입니다.`;
var operator2 = `불린값은 ${boolValue ? "참" : "거짓"} 입니다.`;
//문제
let cart = { name : '도서', amount : '15', price : '300'};
let getTotal = `${cart.amount * cart.price}`;
let myCart = `장바구니에 ${cart.name} 가 있습니다. 총 금액은 ${getTotal} 입니다.`;
console.log(myCart)~와 같이 있는 '백틱' ` <ㅡ 를 사용해 문자열을 삽입하고 변수를 ${}안에 포함시켜 삽입 할 수 있다.
장점으로는 ''를 맞게 했는지 걱정을 좀 덜어주고 변수자리가 눈에 잘 뜨인다는 것이다.
Array 를 전개연산자로 활용하는법
//전개연산자
let array1 = ["one", "two"];
let array2 = ["three", "four"];
const comdined = [...array2, ...array1]; //combined에 =[]안에 들어있는 배열 합치기
console.log("\n1번째 결과========================");
console.log(comdined);
// array1에 들어있는 값들을 각각 first, second, third에 넣는데 third엔 들어갈 값이 없으니 "empty"가 들어가고 array1에 더 많은 값이 있었다면 'others'에 배열로 저장될 것
const [first, second, third = "empty", ...others] = array1;
console.log("\n2번째 결과========================");
console.log(first, second, third, others);
//func()에 들어올 값 중 첫번째 인자는 first에 따로 저장, 나머지는 others에 저장
function func(first, ...others) {
console.log("\n3번째 결과========================");
console.log(first);
console.log(others);
}
func(9, 1, 2, 3, 4, 5, 6, 7, 8);1번째 결과=======================
[ 'three', 'four', 'one', 'two' ]
2번째 결과========================
one two empty []
3번째 결과=======================
9
[
1, 2, 3, 4,
5, 6, 7, 8
]
전개연산자를 이용해 간단하게 코드 짜기
const slime = {
name: "slime",
};
console.log(slime);
const cuteSlime = {
//name: 'slime', // <-대신에 밑 전개연산자 사용
...slime,
attribute: "cute",
};
console.log(cuteSlime);
const purpleCuteSlime = {
//name: "slime",
//attribute: "cute",
...cuteSlime,
color: "purple",
};
console.log(purpleCuteSlime);
//quest
const obj = {
Name: "홍길동",
Git: "wow1234",
};
const test_obj = {
test1: 1,
test2: 2,
};
//answer
const comdined = { ...obj, ...test_obj };
console.log(comdined);
가변 내장 함수는 무결성에 오류를 줄 수 있기 때문에 무경성 내장함수를 사용하는 것을 권장한다.
const fruits = ["apple", "banana", "orange", "strawberry"];
console.log(fruits);
//push 대신
const fruits1 = fruits.slice(0, 4).concat("grape");
console.log(fruits1);
//pop 대신
const fruits2 = fruits1.slice(0, fruits1.length - 1);
console.log(fruits2);
//shift 대신
const fruits3 = fruits.slice(1);
console.log(fruits3);
//splice(1,2) 대신
const s = 1,
c = 2;
const fruits4 = fruits.slice(0, s).concat(fruits.slice(s + c)); //교재 p.48
console.log(fruits4);기타
컴포넌트 불러오는법
import Lifecycle from './R007_LifecycleEx';
...
<Lifecycle></Lifecycle> {/* 컴포넌트 불러오는법1 */}
<Lifecycle /> {/* 컴포넌트 불러오는법2 */}더보기
import React, { Component } from "react";
class R007_LifecycleEx extends Component { {/*R007_LifecycleEx*/}
static getDerivedStateFromProps(props, state) {
console.log("2, getDerivedStateFromProps Call :" + props.prop_value);
return { tmp_state: props.prop_value };
}
constructor(props) {
super(props);
this.state = {};
console.log("1. constructor Call");
}
componentDidMount() {
console.log("4. componentDidMount Call");
console.log("5. tmp_state : " + this.state.tmp_state);
}
render() {
console.log("3. render Call");
return <h2>[This is componentDidMount Function]</h2>;
}
}
export default R007_LifecycleEx;
결과 미리보기 하는법
code에서 터미널 열고 해당 위치에서 node literal.js와 같이 node + 해당파일
하면console.log(이거) 볼수있음
걱정 많이 했는데 2주차 수업은 따라갈만 했다.