2021. 8. 26. 00:36ㆍTIL
요즘은 처음으로 맵을 구현 중인데(현재 우리 서비스 클론 코딩 중)
카카오 map api를 사용하였다.
카카오가 정말 친절하게 문서를 정리해두어서 사수님은 계속 쉽게 할 수있따고 하셨지만,
나는 .. 부들.. 뭐가 이렇게 오래걸리는지😞
그래도 오늘은 드디어 어느정도 마무리가되었다. 약 3일간 맵만 붙잡고 분명 많은 것을 배웠을테지만,
그 중 가장 기억에 남는 (= 오늘 한것😓)것을 정리해보려한다.
메인페이지는 맵과 오른쪽 데이터를 리스트로 불러오는, 이렇게 두개의 구역으로 나뉘어있다. 둘 모두 App.js에서 불러와주고있다.
맵 컴포넌트에서 api통신을하고 데이터의 좌표에 일치하도록 지도에서 뿌려준다. 그리고 그렇게 뿌려진 각 데이터들의 id가 오른쪽 리스트에서 필요하다.
즉, Map.js(자식)의 데이터를 App.js(부모)로 가져와서 RightMenu.js(자식)으로 가져가야한다.
부모에서 자식으로 데이터를 넘겨주는 건 문제없지만 반대로 자식에서 부모로 넘겨주기는 생각처럼 잘 되지않는다.
나는 이번엔 함수를 만들어 해결하였다.
먼저 부모컴포넌트에서 먼저 만들어줬다.
// App.js
function App(props) {
const [list, setList] = useState();
// ParentValue라는 함수 생성
const ParentValue = (v) => {
console.log(v); // 아직 v에는 아무 값도 안담겨있음
}
return (
<div className="App">
<Header/>
<Body>
<Map
ParentValue={ParentValue}/>
// Map컴포넌트에 ParentValue함수 전달
<RightMenu>{props}</RightMenu>
</Body>
</div>
);
}
이제 자식 컴포넌트인 Map.js에서 함수 생성
const childFunction = (v) => {
console.log(v);
props.ParentValue(v);
}
api 통신 후 받아 온 데이터를 list에 넣고 그 리스트에서 필요한 id값만 위에서 만든 함수에 넣어주었다.
let list = res.data.response
let carList = []
for (let car of list) {
if (car.carNum > 0) {
for (let x of car.locationList) {
carList.push(x.id);
}
}
}
childFunction(carList);
다시 App.js로 돌아와서
// App.js
function App(props) {
const [list, setList] = useState();
const ParentValue = (v) => {
console.log(v); // 이제 v에 담긴 carList데이터가 찍힌다.
setList(v); // 그렇게 가져온 데이터를 useState를 사용해 list에 넣어주고,
}
props = list; // props에 리스트를 담는다.
return (
<div className="App">
<Header/>
<Body>
<Map
ParentValue={ParentValue}/>
<RightMenu>{props}</RightMenu> // 그리고 props전달!
</Body>
</div>
);
}
완료! 함수는 전달이되면서 데이터를 직접 전달하는 것은 왜 어려운거지?
사실 아직도 함수를 활용하는게 쉽지않다ㅠㅠ 그리고 아직 화면에 뿌려지진않아 완전히 마무리를 못해 찜찜함을 남기고 자려한다.
오늘은 입사 후 첫 재택을 하였다. 염려했던 것과는 달리 오히려 심적으로 편해 그런지 집중이 더 잘되어 나는 만족했다.
내일은 또 어떤 TIL을 가져올까🧐
'TIL' 카테고리의 다른 글
| ✨입사 후 첫번째 테스크, 관리자페이지1 (0) | 2021.10.12 |
|---|---|
| transition만 사용해 메뉴 스르륵 열리게 만들기 (0) | 2021.09.26 |
| kakao map api로 지도 구현하기! (0) | 2021.09.26 |
| TIL - 0901 페이지네이션 라이브러리 사용하기1 (0) | 2021.09.05 |
| TIL - 0822 (0) | 2021.08.25 |