[React 07] - map, filter, refetch, key / index

🗿 오늘의 목표

1. map / filter
2. key / index
3. refetch 사용하기
4. map 에서 key를 index로 주면 안되는 이유

---

1. map / filter

map

반복문을 써야할 때 실무에서는 for문 대신 map을 주로 사용한다.

map 사용 예시를 보자.

배열을 map 돌려보자.

객체를 map 돌려보자.

다음 퀴즈를 풀어보자.

이렇게 작성하면 된다.

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

여기서 화살표 함수에 대해서 더 알아보자.

---

화살표 함수와 return

화살표 함수에 대해서 더 알아보기 전에 return이 무엇이고 어떤 역할을 하는지를 먼저 알아보도록 하자.

return

두개의 값을 더해주는 add 함수를 만들어보자. (보통 함수의 이름은 동사로 시작하고 변수명은 명사로 시작한다.)
이렇게 상수를 지정해서 넣어주는 방법 말고 그때 그때 원하는 값을 넣어줄 수 있는 함수를 만들어보자.

이렇게 만들 수 있을 것이다.

이 때 함수( add2 )를 실행하면서 넣어주는 값을 인자 arguments 라고 하고 args라고도 한다. 그리고 이 인자가 들어가는 aaa, bbb를 매개변수 parameter 라고 한다.

그리고 보통 하나의 함수는 하나의 기능만을 하게 한다.

만약에 add와 multi 라는 더하기와 곱하기 함수를 두 개 구현했는데 이 때 더하기의 값과 곱하기의 값을 합치고 싶다면 어떻게 해야할까?

더하기의 결과값과 곱하기의 결과값을 저장할 수 있는 무언가가 있어야 될 것이다.
이 때 필요한 것이 바로 return 이다.
return을 사용하면 결과값을 반환하면서 함수를 종료시킬 수 있다.
이제 return을 넣어 코드를 고쳐보자.

이렇게 구현하고 result 라는 상수를 만들어서 각각의 결과값을 저장하면 된다.

이 코드를 화살표 함수로 고쳐보자.

화살표 함수

이 때 화살표함수는 중괄호와 return 사이에 어떠한 로직이 없다면 중괄호와 return을 소괄호로 바꿀 수 있다.

그런데 심지어 소괄호도 빼도 괜찮다면 생략이 가능하다.

그렇다면 다음의 소괄호는 생략이 가능할까?

이건 불가능하다.
여기서 소괄호를 생략해버리면 객체의 중괄호가 아니라 함수의 중괄호가 되기 때문이다. 그래서 값은 undefined가 나오게 된다.

화살표 함수에서 소괄호를 생략할 수 있는지를 잘 알아보고 생략하지 않으면 에러가 날 수 있으므로 유의하자!

---

이 FRUITS 라는 배열을 이렇게 화면에 보여주고 싶다면 어떻게 하면 될까?

아래처럼 JSX 부분에 직접 map 돌려서 작성하면 된다.

이 때 위와 같이 하드코딩 되거나 백엔드로부터 받은 데이터 부분은 주로 대문자로 작성하고 변경이 없기 때문에 밖으로 빼두거나 다른 파일로 빼둔다. 그러면 리렌더링 돼도 새로 그려지지 않을 것이다.

state가 바뀌면 페이지가 리렌더링이 되는데 이 때 use로 시작하는 hooks들은 리렌더링 되지 않는다. 이런 hooks들 때문에 함수형 컴포넌트를 사용할 수 있게 되었다. ( memoiazation을 사용하면 나머지 애들도 페이지가 리렌더링 되어도 사라지지 않게 할 수 있다. )

---

filter

filter를 사용하면 원하는 애들만 필터링 할 수 있다.
다음처럼 뒷부분에 원하는 조건을 넣어주게 되면 조건에 맞으면 살려주고 맞지 않으면 삭제된다.

이런 목록에서 3위까지만 보여준다던지 원하는 값만 보여주고자 한다면 filter를 사용하면 된다.

filter & map

filter와 map을 같이 사용할 수도 있다.
이런식으로 filter를 먼저 사용할수도 있다.

map을 사용하면 원본의 개수가 같지만 filter가 들어가게 되면 결과의 갯수가 원본의 갯수가 적거나 같을 수 밖에 없다.

실무에서는 보통 map을 다음처럼 게시글 목록을 뿌릴 때 가장 많이 쓰인다.

2. key / index

한번 데이터를 받아와서 filter와 map을 같이 사용해보자.

한줄로 보여야 하니까 스타일도 추가해준다.

이 때 콘솔창에 에러가 뜰 것이다.

키가 없다는 에러다. 같은 애들이 계속 반복되는데 누가 누군지 모르겠다고 하는거다.
키값은 중복되면 안되고 고유한 번호여야 한다.
작성자나 제목이 동일할 수 있기 때문에 모두가 다르게 구분할 수 있는 키값을 줘야한다.

그렇다면 map은 el 뒤에 index 값을 받을 수 있는데 인덱스를 키값으로 넣어줘도 될까?

key={index}

map에서 key로 index를 주면 안된다.

그 이유는 삭제를 구현하고 나서 알아보도록 하자.

---

3. refetch 사용하기

삭제 기능을 구현하고 나서 목록을 새로 불러와야 할 것이다. 그 때 refetch를 사용할 수 있다.

deleteBoard({
	variables:{number: Number(event.target.id)},
    refetchQueries: [{query: FETCH_BOARDS}]
})

---

4. map 에서 key를 index로 주면 안되는 이유

이제 map에서 key로 index를 주면 안되는 이유를 알아보자.

만약 선택한 게시글을 하나 삭제한다고 해보자. 키를 인덱스로 주었다면 삭제 후 게시글이 리패치가 될 것이다. 그렇다면 게시글이 지우더라도 아래의 게시글이 다시 올라오면서 삭제하려고 선택한 인덱스가 되어버린다. 그러므로 map을 돌릴 때는 key를 index로 주면 안된다!!!

(+) Fragment 사용하기

또한 map안에 JSX를 감싸기 위해서 아무 의미 없는 빈 태그인 Fragment를 사용할 수 있는데 key를 주기 위해서는 이렇게 작성해주어야 한다. 그냥 <></> 빈태그 작성은 key를 줄 수 없다.