[TIL] 2022년 01월 18일

이번시간에 배운 내용은 React 7강 반복문을 대체할 여러가지 문법에 대해 배웠다.

 

React 7강 

• 나이제 for문 안써 => map함수/filter함수
• 최신 데이터를 가져와줘!! => refetch
• 목록에서 삭제가 안되는데... => key/index

map vs filter

map

const classmates = ["철수", "영희", "훈이"]
classmates.map((el) => (el + "어린이"))

map함수를 사용해 classmates라는 값에 배열형태에 값이 선언되었을때는 map함수를 사용해 element를 사용해 

index 뒷부분에 문자을 삽입할 수 있는 map 함수이다.

const classmates = [
   { name: "철수" },
   { name: "영희" },
   { name: "훈이"},
]

// map함수를 사용해 name뒤에 어린이를 포함할 수 있다.
classmates.map((el) => ({ name: `${el.name} 어린이` }))

배열 안에 객체로 접근하기위해 map함수를 사용해서 객체 안에 접근후 name 값을 가저와 map함수에서 선언한 el값으로 객체안에 name을 가져와 값을 나열 할 수 있고 name 뒷부분에 어린이를 포함할 수 있다.

1. 각 요소에 school: "토끼초등학교" 를 추가하기 

const classmates = [
   { name: "철수" , age: 13},
   { name: "영희" , age:11},
   { name: "훈이", age: 10},
]

classmates.map((el) => ({ name: el.name, 
age: el.age,
school: "토끼 초등학교"}));

그럼 선언된 map 함수에 객체안에 없는 school 값을 넣고싶다면 객체안에선언하지 않아도 map함수 안에 school 값을 넣으면 된다.

const classmates = ["철수", "영희", "훈이"]

// 생략가능
classmates.map((el) => (el + "어린이"))

map함수에서는 {} 를 생략해서 사용이 가능하다. 그 이유는 => 자체가 화살표 함수이기 때문이다.

 

화살표 함수와 리턴 실습

const add4 = () => (100) // 생략가능 ()
const add3 = () => 100;

classmates.map((el) => {name: `${el.name} 어린이`})
// 생략안됨
// 소괄호로 감싼 객체는 생략이 가능X

// 중괄호 
const add6 = () => {name: `${el.name} 어린이`}
객체의 중괄호가 아닌 화살표 함수의 중괄호로 인식한다.

const add6 = () => {
return {name: `${el.name} 어린이`}   
}

return을 해주어야함

() 안에 선언된 값은 ()를 생략이 가능하다. 하지만 소괄호로 감싼 map 함수에서는 생략이 불가능하다.

 

그리고 만약 중괄호( {} )로 선언된 객체는 객체의 중괄호 값이 아닌 화살표 함수의 중괄호로 인식한다.

 

객체안의 중괄호가 인식되지 않고 화살표 함수의 중괄호로 인식한다는 것 

 

중괄호 값을 인식하게 하려면 return 함수를 사용해서 내보내 주어야 한다.

 

HTML 연결

const aaa = [<div>철수</div> , <div>영희</div> , <div> 훈이 </div> ]

return <div>{aaa}</div>

<div>
  <div> 철수 </div>
  <div> 영희 </div>
  <div> 훈이 </div>
</div>

Filter 연결

const args = [10, 13, 11];

// 필터링 하는 것 

args.filter((el) => (el >= 11);

const classmates = [
   { name: "철수" , age: 13},
   { name: "영희" , age:11},
   { name: "훈이", age: 10},
]
// 11보드 크거나 같은 값들만 뽑아줌
classmates.filter((el) => (el.age >= 11))


// filter후 map함수가능
classmates.filter((el) => (el.age >= 11)).map((el) => ({name: el.name, age:el.age, school :"다람쥐 초등학교"}))

// break continue 를 filter로 대체할 수 있다.

filter함수는 배열안에 값들을 필터링 하는 기능을 가지고 있다. 만약 classmates에 배열안에 값을 age만 가져오고 싶고 

그 안에 11 보다 크거나 같은 값들만 뽑기 위해서 el.age 값에 11보다 크거나 같은 값들을 filter함수를 이용해 

 

불러올 수 있다. filter 함수를 사용한 후에는 map함수도 같이 선언 해줄 수 있다.