React 공부 (with nico 1장)

1.1 Arrow Function

- 화살표 함수를 쓰면 return을 안써도 됨

 

- 인자가 한개일때는 괄호를 안써도 됨

 

const sayHello = (name="Human") => "Hello" + name

const nico = sayHello();

console.log(nico);

button.addEventListener("click", event => console.log(event));

 

 

1.2 template Literals

-`` 잘쓰기, 변수는 ${변수} 이렇게 넣어줌 좀 더 간편하게 나타냄

 

const sayHello = (name) => `Hello ${name}`;

 

 

1.3 Object Destructuring

-좀 더 변수를 효율적으로 담는 방법

 

const human ={
	name : "jiwon",
    lastName : "kim",
    nation : "korea",
    favFood : {
    	break : "hey",
        lunch : "two",
        dinner : "three"
    }
}

//비효율적
const name = human.name

//효율
const {name, lastName, nation:nana, favFood :{break, lunch, dinner}} = human;

console.log(name, lastName, nana);

 

 

1.4 Spread Operator

- 이렇게 unpack해서 배열에 넣어주어야함. [], {} 둘다 가능

 

const Days = ["Mon", "Thu", "Wed"];
const otherDays = ["Tue", "Fri", "Sat"];

//두개를 합치려면
const allDays = [...days, ...otherDays];

console.log(allDays);

 

1.5 Classes

-객체지향을 따름 --> 상속 가능

 

class Human{
	constructor (name, lastName){
    	this.name = name;
        this.lastName = lastName;
    }
}

class Baby extends Human{
	cry(){
    	console.log("Waaaa");
    }
    sayName(){
    	console.log(`My name is ${this.name}`)
    }
}

const myBaby = new Baby("mini","me");

console.log(myBaby.cry(), myBaby.sayName());

 

1.6 Arrow map

-array를 전체적으로 바꿀때는 이렇게 map을 사용하면 좋음

 

cosnt days = ["M","T","W","T","F"];

//Smile 추가하기
const addSmile = day => `smile ${day}`
const smileDays = days.map(addSmile);

//index 추가하기
const numDays = days.map((day,index) => `${index} ${day}`);

console.log(smileDays);

 

1.7 Array filter

-배열에서 원하는 것만 추출하기

 

const num = [2,3,4,5,6,7,8,10,20,30,5,40]

const biggerTen = numers.filter(number => number > 10);

console.log(biggerTen);

 

 

1.8 ForEach includes push

-foreach, push 등의 다양한 배열함수 공부

 

let posts = ["hi", "hello", "bye"];

if (posts.includes("hello")){
	posts.push("hello");
}

posts.forEach(post => console.log(post));