TIL_26_221205

26일 차 회고

리액트 시작

주말이 지나고 월요일만 돌아오면 나의 멘탈은.... ㅎㅎ
강의는 쉽게 설명 해주시는데 응용할 생각에... 걱정된다.
자바스크립트도 완벽하게 하고 싶은데 ㅠㅠ 할 거 오백개..
일단.. 화이팅!

배열 메소드

forEach

const testArr = [2,10,100,7,71,50,27,1];
testArr.forEach(function(item){
  console.log(item)
})

//화살표 함수
testArr.forEach((item)=>{
	console.log(item)
})

map

• return 한 요소를 모아 새로운 배열을 만든다.
• return 값이 없으면 undefined를 반환한다.

const mappedArr = testArr.map(function(item){
	return item * 2
})
console.log(mappedArr)

//화살표 함수
const mappedArr2 = testArr.map((item)=> item * 2) // 리턴 값이 적을 경우, {} return 을 빼고 한줄에 적는다.

filter

• 특정조건을 새배열로 반환

const testArr = [2,10,100,7,71,50,27,1];
const fillterArr = testArr.filter((item)=>{
   //return item > 30 ? itemd : null;  //삼항연산자
	return item > 30 ?? item  // nullish 연산자
})

reduce

• 누산기가 포함되어 있기 때문에, 배열의 각 요소에 대해 함수를 실행하고 누적된 값을 출력할 때 용이

const testArr = [2,10,100,7,71,50,27,1];
testArr.reduce((acc,cur,idx)=>{
	console.log('acc',acc) //누산기
 	console.log('cur',cur) //현재값
  	console.log('idx',idx) // 인덱스 
   return (acc = acc + cur)
},0) // 초기값  -> 인덱스가 0번 부터 시작한다. 

/*
acc 0
cur 2
idx 0

acc 2
cur 10
idx 1

...

acc 240
cur 27
idx 6

*/

json

• promise의 형태를 가진 객체
• promise 객체는 비동기 통신을 위한 객체
• 통신 이후 일어날 일들에 대한 '메서드'를 가지고 있다.

  • 통신이 성공했을때 -> then
  • 통신이 실패 했을때 -> catch

fetch('https://jsonplaceholder.typicode.com/todos')
//res : 받아온 전부를 가지고 있는 'promise'객체
//json : body에 있는 정보들을 promise 객체 형태로 가지고 온다.
//json도 비동기 함수, promise객체를 반환.
.then((res)=>{return res.json()})
//json 가져 오는 것을 성공하면 data로 얻을수 있다.
//json()  수행 후 가져온 body 부분.
.then((data)=>{

  const customULTag = document.createElement('ul');
  document.querySelector('body').appendChild(customULTag)
  let customLITag;
  
  //for of문을 통해 DOM 제어 
  for(item of data){
	customLITag = document.createElement('li')
    customLITag.appendChid(customLITag)
    customLITag.textContent = item['title']
  }
    
})