실전프로젝트[오디약] kakaomap props

오디약 프로젝트에서 카카오맵을 이용해야하는 페이지가 약국의 전체리스트를 보여주는 페이지와 상세페이지 리스트인데 

kakaomap컴포넌트를 재사용해서 전체, 상세페이지에 각각 보여주고싶었다. 

 

map컴포넌트에 props로 각각 데이터를 내려줘서 들어오는 데이터를 맵에 반복문으로 돌려서 보여주기만 하면 된다고 생각했다.

 

const StoreDetail = () => {
  const dummyList = {
    storeId: 1,
    address: '서울특별시 강북구 번동 어쩌고 저쩌고 저쩌고 어쩌고 ',
    name: '희망찬약국',
    businessHours: '수요일 09:00~18:00',
    callNumber: '02-122-3921',
    lon: 126.84676212183612,
    lat: 37.531164294971674,
  };
  return (
    <CSS.MainContainer>
      <MapApi detail={dummyList} />
      <DetailBoxArticle>
        <CSS.TitleBox>

상세페이지에서 이렇게 map컴포넌트에 props로 데이터를 내려줬는데 계속 forEach를 돌릴 수 없다는 에러가 떠서 디버깅으로 확인했을때 detail이 undefinde가 떴다.

const MapApi = ({ detail }) => {
  // eslint-disable-next-line no-debugger
  debugger;
  useEffect(() => {

그리고 

const MapApi = props => {
  // eslint-disable-next-line no-debugger
  debugger;
  useEffect(() => {

props로 확인했더니 {}빈 객체가 담겨져있었다.

 

문제를 확인했을때 전체리스트에서 맵에 props로 내려오는 데이터는 배열형식으로 들어오지만 상세페이지에서는 한개의 정보만 들어오다보니 배열형식이 아니여서 forEach가 돌수 없는 걸로 확인이 됬다.

 

여기서 두가지 고민이 있었는데 

1. 맵에서 배열로 가져올경우, 객체로 1개만 가져올경우 두가지 로직으로 처리한다.
2. 상세컴포넌트에서 배열로 가져오고 [0]이렇게 0번째 인덱스를 화면에 뿌려준다.

어떤게 로직적으로 더 좋을지 고민을 하던중 한솔님이 준 의견으로 객체정보를 서버에서 받아와서 맵으로 props를 내려줄때 배열에 담아서 내려보내는걸로 결정이 됬고, 이렇게 하니까 로직도 짧아지고 간단하게 처리 할 수 있었다. 

 

const dummyList = {
  storeId: 1,
  address: '서울특별시 강북구 번동 어쩌고 저쩌고 저쩌고 어쩌고 ',
  name: '희망찬약국',
  businessHours: '수요일 09:00~18:00',
  callNumber: '02-122-3921',
  lon: 126.84676212183612,
  lat: 37.531164294971674,
};
const StoreDetail = () => {
  const dummyArr = [dummyList];

 

진짜 간단한 방법이 있었는데 나는 너무 복잡하게만 생각했던것 같다. 알고리즘 풀때가 생각났다.. 진짜 풀고나면 이렇게 간단하게 풀 수 있었다고..?인데 막상 풀때는 뭔가 복잡하게만 생각하니 더 어렵게 느껴지는 것 같다.