앱개발 학습. 리액트, 화살표함수, 비구조할당, 리터럴, 객체리터럴, map

검색을 생활화하자.

개발하다보면 어차피 찾아보며 개발해야 함.

 

그래도 강사님께서 설명을 좀 디테일하게 해주면 좋겠다.

프로퍼티든 메쏘드든 초반엔 알아도 몰라도 상관없고, 하다보면 저절로 익숙해진다는건 알겠으나,,,

이건 메쏘듭니다.만 해도 머릿속에 정리하기가 편할거같은데 이렇게 씁니다 만 알려주니 어렵다.

원리 따져가며 공부하는 스타일이라 더 그렇게 느껴지는듯 하다

---

// 앱개발 종합반 - 1주차(스파르타코딩클럽)

화살표 함수

• function 축약형. 많이 쓰게됨

[기존 방식]

let a = function() {
  console.log("function");
}
a();

[최신 방식]

let a = () => {
  console.log("arrow function");
}
a();.

비구조 할당

• 딕셔너리 키와 값을 빠르게 꺼내기 위한 방법
• 바로 와닿지 않으니 일단 암기

//객체 , 값으로 함수도 들어갈 수 있음
let blog = {
	owner : "noah",
	url : "noahlogs.tistory.com",
	getPost() { 
		console.log("ES6 문법 정리"); 
	}
};

//기존 할당 방식
let owner = blog.owner
let getPost = blog.getPost()

//비구조 할당 방식
let { owner, getPost } = blog;       

//함수에서 비구조 할당 방식으로 전달된 딕셔너리 값 꺼내기
let blogFunction = ({owner,url,getPost}) => {
	console.log(owner)
	console.log(url)
	console.log(getPost())
}

blogFunction(blog)

리터럴

• 따옴표 대신 백틱(`)을 쓰면 줄바꿈이 자유로움
• 백틱 안에서는 ${변수} 로 문자열 안에서 문자열을 쓸 수 있음

const id = "myId" ;
const url = `http://noahlog.tistory.com/login/${id}` ;

const message = "줄바꿈을 하려면 \n 이 기호를 써야 했죠!"

const message = ` 줄바꿈도 마음대로
사용이 가능합니다. `

객체 리터럴

• 딕셔너리를 짧게 쓰는 방법

[기존방식]

let name = `스파르타`;
let job
let user = {name: name, job: job};

console.log(user);
// //{name: "스파르타", job: "developer"}

• 딕셔너리 안에 변수명만 넣어도 변수명과 값을 key:value 형태로 넣어준다

[최신 방식]

let name = "스파르타";
let job = "developer";

let user = {
  name,
  job
}

console.log(user);
//{name: "스파르타", job: "developer"}

map 일종의 반복문

// 기존의 for문
let numbers = [1,2,3,4,5,6,7];
for(let i=0; i<numbers.length; i++){
	console.log(numbers[i]);
}

// map 으로 똑같이 구현
let numbers = [1,2,3,4,5,6,7];

numbers.map((value,i) => { 
	console.log(value,i) 
})

map 활용 숙제

아래 for문을 map함수로 구현

let fruit_list = ['사과','감','감','배','포도','포도','딸기',
'포도','감','수박','딸기']

let count = 0;
for (let i = 0; i < fruit_list.length; i++) {
	let fruit = fruit_list[i];
	if (fruit == '딸기') {
		count += 1;
	}
}
console.log(count);

[내 답안]
let fruit_list = ['사과','감','감','배','포도','포도','딸기',
'포도','감','수박','딸기']
let count = 0;
fruit_list.map((value, i) => {
    if (value == '딸기') {
        count += 1;
    }
})
console.log(count);

[모범답안]
let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']
let count = 0;
fruit_list.map((f)=>{
    if(f == "딸기") count += 1
})

console.log(count)

• map에 value, i로 안써도 되나보다. 괄호 안의 문자를 변수로 인식하는 듯.

filter() 메서드

• 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 만들어줌

[내 코딩]
let fruit_list = ['사과','감','감','배','포도','포도','딸기',
'포도','감','수박','딸기']

function podoGet(value) {
	return value == "포도"
}

let podo_list = fruit_list.filter(podoGet);
console.log(podo_list);

[모범답안]
let fruit_list = ['사과','감','감','배','포도','포도','딸기',
'포도','감','수박','딸기']

let podo_list = fruit_list.filter((f)=>{
	return f == '포도'
})

console.log(podo_list) //['포도','포도','포도']