728x90
반응형
- [React.js] 네이버 지도 API 마커 줌인아웃 레벨 값 이용하기2024-03-04 17:01:111. zoom level 값 변경 시 리렌더링 어떻게? zoom level에 따라 오버레이와 마커 등을 각각 다르게 렌더링 하고자 하였다. 이에 따라 현재의 zoom level 값을 useState 훅으로 관리할 필요가 있었다. 아래 코드와 같이 getZoom() 메서드를 이용해 보았지만 아쉬움이 많았다. 왜냐하면 zoom level이 변경될 때 즉시 리렌더링이 일어나지 않았기 때문이다(아래 코드에는 작성하지 않았지만 naverMap.current?.getZoom()의 반환 값을 useState에 넣어보기도 하였으나 결과는 동일했다). 그렇다면 어떻게 해야 zoom level 값이 변경될 때 즉시 리렌더링 할 수 있을까? // (생략) const naverMap = useRef(); useEffect((..
- [React.js] 네이버 지도 API 마커 리렌더링시 누적(쌓이는) 현상(마커 클러스터)2024-02-29 10:03:081. 마커 누적 현상 마커를 커스텀 오버레이로 만들어 사용했다. 그 이유는 마커에 서버로부터 받은 데이터를 표시해야 했기 때문이다. 동적인 데이터를 렌더링 하기 위해 useEffect 훅을 사용했다. 그런데 데이터가 변경(리렌더링) 될 때마다 동일한 위치에 동일한 마커가 계속해서 쌓이는 현상이 발생했다! 2. useEffect의 return 적용 function MarkerCluster({ data }) { const navermaps = useNavermaps(); const map = useMap(); const [cluster, setCluster] = useState(null); // (생략) const MarkerClustering = makeMarkerClustering(window.naver..
- [React.js] 네이버 지도 API 마커 클러스터 튜터리얼 따라하기!2024-02-21 16:52:441. 네이버 지도 API 설치 npm install react-naver-maps --save 2. App.js에 NavermapsProvider 적용 NavermapsProvider의 경우-이 글을 작성하는 시점에-공식 문서에는 NaverMapsProvider로 되어 있었고 따라서 로딩 에러가 발생했다. 따라서 NavermapsProvider라고 import 해야 한다. // src/App.js import { NavermapsProvider } from "react-naver-maps"; import NaverMapsMarkerCluster from "./components/NaverMapsMarkerCluster"; function App() { // ncpClientId에 네이버 지도 API 클라..
- [React.js] react-naver-maps의 NaverMaps Provider 에러2024-02-21 14:55:371. NaverMaps Provider 에러 네이버 지도 API 마커 클러스터 튜토리얼을 따라 해 보고자 했고, 시작부터 에러를 만났다. 2. NaverMapsProvider가 아닌 NavermapsProvider Attempted import error: 'NaverMapsProvider' is not exported from 'react-naver-maps' (imported as 'NaverMapsProvider'). ERROR in ./src/App.js 9:30-47 [그림 1]과 같이 QuickStart를 따라 NaverMapsProvider를 import 했는데 위와 같은 에러가 발생했다. 😉 공식 문서 Quickstart : https://zeakd.github.io/react-naver-..
- [React.js] 간단한 Todo List 만들기(Zustand를 이용한 전역 상태 관리)2024-02-13 11:10:111. Zustand를 적용한 Todo List [그림 1]과 같이 Zustand를 이용해 간단한 Todo List를 구현해 보았다. Zustand를 이용할 경우 Redux보다 훨씬 간편하게 전역 상태를 관리할 수 있었다. 전역 상태를 이용해야 하는 컴포넌트에서 Zustand의 create 메서드를 이용해 작성한 모듈을 로딩하기만 하면 즉시 사용할 수 있었기 때문이다. 2. React.js 프로젝트 생성 "react-zustand-todolist"라는 리액트 프로젝트를 생성한다. npx create-react-app react-zustand-todolist 3. Zustand 라이브러리 설치 npm i zustand 😉 공식 문서 : https://docs.pmnd.rs/zustand/getting-sta..
- [React.js] React Router 적용2024-02-06 17:57:081. React Router 설치 npm i react-router-dom 😉 공식 문서 : https://reactrouter.com/en/main 2. 프로젝트에 적용 1. BrowserRouter 컴포넌트 적용 // index.jsx // (생략) import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( // BrowserRouter 컴포넌트 적용 ); 2. , 컴포넌트 적용 // app.js // (생략) import { Link, Route, Routes, useLocation } from "react-router-dom"..
- [React.js] React-Toastify 적용2024-02-02 17:52:321. React-Toastify 설치 1) 설치 https://www.npmjs.com/package/react-toastify#react-toastify npm install --save react-toastify 2) 추가 설치 사용자 정의 애니메이션(Define a custom enter and exit animation)을 적용하고자 한다면 설치하면 된다. React-Toastify 공식 문서: https://fkhadra.github.io/react-toastify/custom-animation Animate.css 공식 문서: https://animate.style/ npm install animate.css --save 3. React-Toastify 적용예 📌 app.js import "...
- [React.js] React Three Fiber(R3F) 애니메이션 재생2023-12-12 10:56:121. useEffect 훅에서 play() 메서드 작동 안 됨 3D 모델의 애니메이션을 재생하고자 하였다. 아래의 코드를 적용해 봤는데 애니메이션이 플레이되지 않았다. import React, { useState, useEffect } from "react"; import { GLTFLoader } from "three/addons/loaders/GLTFLoader"; import { useLoader } from "@react-three/fiber"; const Model = ({ characterPath, scale }) => { const gltf = useLoader(GLTFLoader, characterPath); const mixer = new THREE.AnimationMixer(gltf.s..
728x90
반응형