오늘은 많은 것들은 배웠지만 그중에서 map에 대해서 배웠다. 으잉? 맵? 그거 너무 간단한 메소드 아냐? 겨우 그거 배운다고? 라고 생각 할 수 도 있지만 절대 아니다. map은 실무에서 자주 쓰이기 때문에 잘 알아둬야 하는 소중한 친구이다!
(맵은 우리들에게 꼭 필요한 친구에요)
지도라는 뜻을 지닌 map은 뜻처럼 배열이나, 객체가 담긴 배열을 확! 펼쳐주는 기능을 하는 메소드이다. 확 펼쳐준다고? 그게 뭔소리야? 먼저 map자체를 모르는 코린이(코딩 어린이)들도 있을테니 먼저 맵에 대해 설명하도록 하겠다.
const friendsInfo = [ {name: "인욱", age: 34}, {name: "정덕", age: 60}, {name: "예슬", age: 30} ]
이렇게 나의 친구들의 정보가 담긴 객체 정보를 배열에 담아 보았다. 그렇다면 여기서 각 정보를 전부 꺼내오려면 어떻게 할까? for문을 사용하는 번거로운 방법이 있을 것이다. 아래와 같이 for문을 사용할 수 있다.
for(let i = 0; i < friendsInfo.length; i++){ console.log(friendsInfo[i]) }
결과
{ name: '인욱', age: 34 } { name: '정덕', age: 60 } { name: '예슬', age: 30 }
하지만 map을 사용하면 다음과 같이 작성할 수 있다.
const friendsInfo = [
{name: "인욱", age: 34},
{name: "정덕", age: 60},
{name: "예슬", age: 30}
]
friendsInfo.map((el) => {return el})
(코드박스를 썼는데 자꾸 잘려 나간다 죄송하다.)
결과
[ { name: '인욱', age: 34 }, { name: '정덕', age: 60 }, { name: '예슬', age: 30 } ]
이런식으로 받아올 수 있다. 그렇다면 이걸 실무에서 어떻게 쓴단 말인가? 오늘은 그걸 알아보도록 하자.
(시작해보자!)
만약에 전체 게시물을 조회받고자 한다고 가정하자. gql이나 postman을 사용한다면 등록된 게시물의 작성자, 제목, 글쓴이 등 다양한 정보들은 전부 JSON형식즉, 여러가지 객체정보들이 뭉쳐져 있는 형태로 오게 된다. 그러므로 이 정보를 JSX 영역 안에 보여주기 위해서 정보를 뿌려준다고 가정하면 우리는 for문을 사용하는 것보다는 map을 사용하는것이 더 간편하다는 당연한 결론에 이르게 될것이다.
(어려운 세상 간편하게 가자구!)
먼저 여기선 GQL을 사용한 예제를 들것이다. 당연히 먼저 app.js에 사용할 GQL주소를 입력하여 API를 연동할수 있도록 설정을 해놓아야 할 것이다. 그 후에 GQL을 DOCS에 쓰여있는데로 변수에 할당해준다. 물론 그전에! import로 GQL이라는 친구를 훅을 걸어 델고 오는것을 절대 잊지 말것!!!
import { gql, useQuery } from "@apollo/client";
오늘 실습때는 전체 게시글 정보 조회를 했기 때문에 uesQuery 또한 사용해 줘야만 한다.
그 후에 GQL의 API를 다시 uesQuery 라는 친구를 사용해 또 data라는 변수에 할당해 주도록 하겠다. 전체게시글 정보를 조회하는 것이지 특정 게시물을 조회하는 것이 아니기 때문에 게시물의 작성자, 비밀번호 등등은 따로 설정해 두지 않아도 된다.
const { data } = useQuery(FETCH_BOARDS);
그렇다면 data를 console.log(data)
로 하게 된다면 콘솔창에 JSON형식으로 객체정보들이 넘어오게 될것이다. 한번 실험해 볼까?
(데이터야 제발 제대로 받아와줘 ㅠㅠ)
콘솔창에 fetchBoards 어쩌고 저쩌고 배열이 넘어오는것을 확인할 수 있다. ㅎㅎ(콘솔창에 에러 없이 데이터가 잘 넘어오면 얼마나 기쁜지 ㅎㅎㅎ)
이제 이것을 map을 사용해서 jsx파일에 UI형식으로 나타나게끔 뿌려주면 되는것이다!!
data.fetchBoards.map()
(fetchBoards안에 정보가 있으므로 닷노테이션 방식(이라고 읽고 점을 찍는다고 말한다 ㅋㅋㅋ)을 사용해서 어떤 데이터를 뿌릴지 선택해 준다.)
`return (
<>
{data?.fetchBoards.map((el) => (
<Row>
<Column>
<input type="checkbox"></input>
</Column>
<Column>{el.number}</Column>
<Column>{el.title}</Column>
<Column>{el.contents}</Column>
</Row>
))}
</>
);`
여기서 핑크색 태그들은 전부 스타일을 이모션에서 가져온 것이다. 코린이들은 그냥 div와 같은 태그들이라고 생각하면 된다. 여기서 el은 변수이름과 같이 임의적으로 주는 것으로 어떤 이름을 줘도 data에 있는 전보들이 넘어오게 된다. el에는 fetchBoards의 요소들이 들어오고 콘솔창에 number와 contents 같은 키값이 나와 있으므로 el.number, el.title 이런 방식으로 찍어주면 그 정보가 박스 안에 갇혀 사용자들에게 보여지게 된다.
(기억이 안날 수도 있으니 다시 한 번)
아래는 구현된 화면이다 이 화면을 좀 더 다듬어 주면 전체게시물들을 조회해 주는 화면을 구현할 수 있을 것이다.