본문 바로가기

전체 글

 (72)
[React] useRef document.getElementById('');처럼 저장공간이나 DOM요소에 접근하기 위해 쓰이는 Hook이다.이해를 돕기 위해 비유하자면, useRef는 책갈피의 역할을 한다고 이해해도 좋다. 일단 가장 먼저, useRef를 사용하는 이유이다.ref 객체는 리랜더링에 영향을 받지 않고 저장된다.state등과 다르게 ref 객체에 의한 리랜더링이 발생하지 않는다.최근에 설명한 map api처럼 같은 DOM요소를 여러번 재사용하는 경우 등에서 document등을 사용하면 id값의 충돌로 인해 무한루프 등의 에러가 발생할 수 있다.이럴때 useRef를 사용하면 좋다.  useRef 사용법import React, { useRef, useEffect } from 'react';const MapComp = (..
[React] Kakao map api 2 지난 포스트에서 단순히 지도를 띄우는 것까지 해보았다. 이번에는 지난 프로젝트에서 사용했던 몇가지 옵션들에 대해서 포스트하려한다. map api를 사용하면서 대표적으로 추가하는 건 아무래도 오버레이와 마커일 것이다.커스텀 훅으로 만든 만큼 오버레이와 마커 역시 여기에 맞추어서 수정해주어야한다. ... setMapDetails({ option: options });...return mapDetails; 커스텀 훅의 마지막 부분이다.커스텀 훅의 반환 값이 mapDetails인데 이 부분이 무엇인지를 들여다보면 내부에 객체가 존재한다는 것을 알 수 있다.이 객체가 생성하고자 하는 맵의 옵션들인 것이다. 그러니까 마커와 오버레이를 생성하는 기본형도 맵에 옵션으로 추가하는 방식이기 때문에,저기에 보이는 setM..
[React] Kakao map api 1 이번 프로젝트에서 가장 중요했던 것 중에 하나가 지도 객체를 사용하는 것이었다. 내 일정이나 장소 등을 보여주기 위해선 아무래도 지도 위에 표기해주는 것이 직관적이고 편리하다고 생각해서였다. kakao, naver, google map등이 있었는데 아무래도 일단은 국내 데이터를 다룰 것이고, 처음 이용해보는 것이기에 kakao map api를 선택했다. Kakao map apihttps://apis.map.kakao.com/web/guide/ 웹에서의 설정 작업은 설명이 많이 되어있으니 스킵하겠다. public/index.html 파일에APP KEY값을 수정해서 삽입해준다. (header, body 두 곳 어디에 넣어도 괜찮다.) api 연동은 되었으니 이제 내 코드에서 가져다 쓰면된다. 기본적인 지도 ..

티스토리툴바