수업시간에 배운 내용

1. map
(1) 반복문하면 떠오르는건 for를 이용하는 방법이 딱 떠오르는데, 실무에서는 이 for문은 실무에서는 자주 사용하지 않는다고 한다. 그래서 사용되는게 이 map이라는 함수이다.
(2) map은 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. 여기에서 중요한건 새로운 배열을 반환하는것인데 다시 말해 먼저의 배열과는 다른 배열이라는 것이다.
(3) map은 배열의 내장함수 이기 때문에 사용할때는 배열과 함꼐 사용해야 한다.

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

(4) 여기서 el은 각 요소가 되며, 객체가 원소인 배열에서도 사용이 가능하다. 객체에서는 el의 key값으로 밸류값에 접근이 가능하다. (el.name => "철수","영희","훈이")

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

(5) 여기서 속성을 일괄적으로 추가도 가능해지는데, 기존에 값들은 el.name 으로 넣어주고, 속성으로 넣고자 하는 값을 넣어주게 되면 아래와 같은 결과를 얻을수 있다.

classmate.map((el) => ({name : el.name + "어린이", school : "다람쥐유치원"}))
=> [
{name : "철수어린이",school : "떡잎유치원"},
{name : "영희어린이",school : "떡잎유치원"},
{name : "훈이어린이",school : "떡잎유치원"}
]

(6) 화살표 함수에서 소괄호를 생략하는것도 가능한데, 본문(뒤의 괄호안에 적히는 코드)이 한줄이라면 가능하다. 반대로 불가능한 경우는 리턴값이 객체인 경우는 생략이 불가능 하다. (객체의 중괄호가 함수의 중괄호가 되어버려서 꼬인다..)

(7) map 함수 사용시 주의할점으로는, index를 key 값으로 사용시 오류가 발생할수 있으니 사용하지 않기를 권장하며, 사용가능한 경우는 아래 사진과 같다.

2. filter
(1) filter 함수는 말 그대로 필터링을 해주는데, map 함수와 같이 배열에서만 사용이 가능하며, 동시에 사용도 가능하다.
(2) filter 함수는 조건을 설정하여 그 값에 해당하는 값만 얻을수 있는데, map 함수와 사용시 먼저 필터링을 한번 해주고 난 후에 그 값을 다시 map 함수를 통해 값을 얻을수 있다.

3. refetchQueries
(1) 말 그대로 기존에 받아왔던 데이터가 변경되었을 경우 그 값을 다시 받아오기 위해 사용된다.

(2) 사용 코드의 예시를 보면, 게시글이 삭제되면서 refetchQueries를 사용하여 게시글을 다시 불러온다.
(3) 추가적인 검색을 해보니 비동기적으로 실행된다고 한다. 이를 업데이트가 끝난 후 동기처리하면려면 awaitRefetchQueries: true 옵션을 설정하면 된다고 한다!