[Wecode 34일차] react-google-map, disply:none, 삽질

1. react-google-map 적용하기

1) 라이브러리를 설치

npm install --save google-map-react

2)  구글맵을 사용하려면 api키가 필요하다.   *왜 오픈api에 키를 필요로 하는지 생각해 보면 좋을 듯.

3) 구글맵은 신용카드 번호를 등록해야 사용이 가능하다. 가입시 $300 크레딧주고 12개월 동안 사용할 수 있게 해줌. 기간 종료후에도 유료로 전환되지 않음

4) https://console.cloud.google.com/ 

Google Cloud Platform

위 사이트 들어가서 "시작하기 " 누르고 계좌정보 입력해야한다. 안할 경우 지도 불러왔을때 "구글지도를 제대로 로드할 수 없습니다"의 알림을 보게된다.

5) 결제정보를 설정하였으면 프로젝트 생성

6) Maps javascript api를 선택 후  api 사용자 인증정보에서 키를 생성하면 된다.

이해가 가지 않는다면 예제들이 많으니 참고하면 좋을 듯.

2. display:none 에 대한 생각

위와 같은 이벤트를 구현한다 했을때, display:none 을 사용하는 것보다 아예 삭제를 시키는 것이 좋다는 리뷰를 받았다.

그이유는 어차피 안보여지는 부분인데 display:none을 해버리면, 브라우져에서 랜더링할때 어차피 안보이는 부분인데 

랜더링되어버리니, 불필요하게 일을 하기 때문.

이런경우 true/false값으로 처리를 해주면 좋다.

   {isClickReviews && <WriteReview  resturantName="다우랑" profile={ProfliePhoto} okText="완료" cancleText="취소"/>} 

3. 자식이 부모컴포넌트로 데이터 전달시

MainLayout : 헤더 등 웹에서 공통적으로 보여지는 부분 여기에 만듬.
Main : 실질적인 컴포넌트

위의 컴포넌트와 화면에서 버튼은 MainLayout에 포함된다. 

그리고 실질적으로 보여지는 화면은 버튼 아래<사진>부분에서 보여지게 된다.

이벤트효과를 MainLayout에서 클릭하면 서버에 GET방식으로 누른 버튼에 대한 값만 보내서, 해당 정보의 값을 부모컴포넌트인

Main컴포넌트로 보내주어야 한다.

//MainLayout.js

handleCategoryClick=(storeId)=>{        
  fetch("http://localhost:8000/storeList?id="+storeId)
  .then(res=> res.json())
  .then(result => this.props.setStore(result))       
}

(중략....)

<div className="select_tag" name="all" onClick={e=>handleCategoryClick()}># 전체</div>
<div className="select_tag" name="kor" onClick={e=>{handleCategoryClick(1)}}># 한식</div>
<div className="select_tag" name="chi" onClick={e=> {handleCategoryClick(2)}}># 중식</div>
<div className="select_tag" name="jpn" onClick={e=> {handleCategoryClick(3)}}># 일식</div>
<div className="select_tag" name="fastfood" onClick={e=> {handleCategoryClick(4)}}># 패스트푸드</div>

//Main.js

state={
  isClickedBell : false,
  isClickedOps : false,
  storeList: []
}

//자식으로부터 데이터 받아서 state에 관리
setStore = (store) => {
  this.setState({ 
  storeList : store
  })
}

(...중략...)

<MainLayout setStore={setStore} >  //자식에서 부모에게 데이터 전달해줄 함수 작성

4. fetch 삽질

빈 객체안에 값있는 것은 무엇?? 

우선 componentDidMount()안에 빈 객체를 선언하고 fetch~then~then 밖에다가 콘솔을 찍으니, 빈배열이 나오는게 당연하다.

왜??fetch는 비동기니깐.. then~then에서 끝날때까지 시간이 걸린다. 그래서 빈배열이 먼저찍히고, 나중에 실행된 결과가 찍힌거..

비몽사몽해서, 시간만 버렸다.. 차라리 잠을 잘것을..

값이 2중 객체로 들어오는데, 나는 멍청하게 state안에서 배열로 해놓고, 리액트 state안에 있는 배열은 강제로 push하면 안된다는

것에 사로잡혀 비몽사몽간 삽질과 시간을 허비했다. -_-  이건 프로미스의 문제가 아니야. 내 문제야.

값이 뭘로 들어오든 마지막 then에서 this.setState({}) 로 결과값 그냥 넣으면 된다.