오늘은 반복해서 사용할수 있는 Map함수, Map 함수중 데이터를 골라쓰는 filter에 대해서 배웠다.
기존에 사용하던 for 함수는 실무에서 거의 사용하지 않으며 Map 함수로 더욱더 간결하게 표현할수 있다.
Map 함수 사용식
아래 배열에 "어린이"를 넣어 "철수어린이", "영희어린이", "훈이어린이" 방식으로 표현하고 싶다면
Map함수를 사용하면 된다.
classmates = [“철수”, “영희”, “훈이”]classmates.map((el)=>el +"어린이")이런식으로 작성해주면 각 인덱스에 어린이라는 단어가 추가된다.
객체에도 적용이 가능하다.
const classmates = [
{name: “철수”},
{name: “영희”},
{name: “훈이”}
]classmates.map((el) =>(name: el.name, school: "다람쥐 초등학교"))const classmates = [
{name: “철수” school: "다람쥐 초등학교"},
{name: “영희” school: "다람쥐 초등학교"},
{name: “훈이” school: "다람쥐 초등학교"}
]map함수는 처음부터 시작해 el을 통과해서 돌린후 다시 배열에 넣는다 이렇게 생각하면 좋다.
map함수를 html과 같이 사용할수 있고 html과 같이 사용하면 쉽게 html을 반복해서 보여줄수 있다. 만들수 있다.
위와 같은 배열을 선언후 하나의 객체마다 html에 뿌려주려고 한다면 아래와 같이 map 함수로 구현이 가능하다.
div 태그를 {fruits.map((el) => ()))} 이렇게 map 함수로 감쌌다.
이렇게 되면 map 함수가 돌면서 각 객체마다.
<div>
<span>{el.number}</span>
<h1>{el.title}</h1>
</div>이부분에 number, title을 넣어서 그려준다.
html부분에 일일이 작성하지 않아도 data를 뽑아서 그려준다.
Map으로 표만들기
map 기능을활용해 서버에서 데이터를 받은후 표로 그려줄수 있다.
아마 모든 게시판이 이렇게 표현될거 같다.
포트폴리오 과제중 map함수 사용부분이다.
Row라는 태그를 map 함수로 감싸 주었고 그안에 속성값들을 넣었다.
query를 이용해 서버에서 데이터를 받아온값을 태그안에 넣어주는 것이다.
이렇게 작성하면 화면에는 다음과같이 표시된다.
추가적인 css작업을 진행하기는 했지만 일반적인 게시글 목록과 비슷한것을 볼수 있다.
refetchQueries
게시판을 사용하다보면 새로운글을 작성하거나, 새로고침을 하는경우 최신글이 올라오거나 삭제된다.
이기능 구현을 위해선 어떤 동작시마다 refetchQueries를 사용해야 한다.
말그대로 Query를 다시 Fetch 하는 것이다.
Mutation 부분에 refetchQueries를 사용해 작성한다.
기존에 작성하였던 mutation 코드 부분이다.
게시글 삭제후 데이터 반영이 안될시에는 다시 데이터를 받아온다.
refetchQueries 사용
이렇게하면 게시글 업데이트가 가능하다.
Key 값이 필요한 이유
이렇게만 하면 문제가 생긴다.
React가 어떤요소를 변경 추가 삭제할지 식별해야하는데 그러기 위해선 key값이 필요하다.
key값 설정시에는 변하지 않는 고유값으로 지정해 줘야한다.
index로 key값을 주면 데이터가 변하기때문에 id 값으로 주는것이 좋다.
filter 함수
filter 함수는 for문의 break,continue 대신 사용한다.
map은 결과를 넣어주고, filter는 평가한다고 생각하면 된다.
const classmate = [
{name: "철수", age: 10, school: "토끼초등학교"},
{name: "영희", age: 13, school: "토끼초등학교"},
{name: "훈이", age: 11, school: "토끼초등학교"},
]위처럼 작성되어있을때 filter를 사용한다면
classmate.filter((el) => (el.age === 11))
classmate.filter((el) => (el.name === "영희"))
classmate.filter((el) => (el.school === "토끼초등학교"))
처럼 필터를 사용하고 내용은 el.age === 11인 내용만 뽑는다 이렇게 이해하면된다.
오늘 배운 Map 함수는 refetchQueries를 이용해 게시판을 만들때 꼭 필요한 내용인거 같다.
계속 사용하고 복습하면서 충분히 익혀야 겠다.
