개발 노트

거쳐야 하는 단계가 적다면 상위 컴포넌트에서 하위 컴포넌트로 콜백함수를 props로 전달하고 하위 컴포넌트에서 해당 콜백함수를 호출해서 props로 전달할 수 있다. // 부모 컴포넌트 import React, { useState } from 'react'; import ChildComponent from './ChildComponent'; function ParentComponent() { const [valueFromChild, setValueFromChild] = useState(''); const handleValueChange = (newValue) => { setValueFromChild(newValue); }; return ( Value from child: {valueFromChild} )..

ant design 4.24 에서 을 사용할 때, 속성에 open이 아닌 visible로 작성해야 모달창이 열린다. // 모달창이 보이지 않는다 Some contents... Some contents... Some contents... // 모달창이 보인다 Some contents... Some contents... Some contents...

화면에 버튼 하나를 만들어 주고 클릭하면 이미지를 변경해준다 { if (!changeMarker) { setImgShow("./service_img.png"); setChangeMarker(true); } else { setImgShow("./cow_img.png"); setChangeMarker(false); } }}>마커 변경 실행화면 [ 문제점 ] 마커 변경 버튼을 클릭하면 좌표와 줌 레벨이 초기값으로 돌아간다. useEffect에 imgShow 값이 변경되면 재렌더링 시키도록 했기 때문 [ 해결 ] 현재 좌표와 줌 레벨 값을 useState로 저장해두고 재렌더링 될때마다 저장된 값으로 변경시켜주면 해결된다. // 지도가 이동, 확대, 축소로 인해 중심좌표가 변경되면 마지막 파라미터로 넘어온 함수를..

let [imgShow, setImgShow] = useState("./cow_img.png"); // 마커 이미지 let [mapLevel, setMapLevel] = useState(3); // 지도 확대/축소 let [mapLatlng, setMapLatlng] = useState({ La: 126.911915228347, Ma: 35.1726725437801 }); // 지도 중심좌표 값 useEffect 안에 작성 // 마커를 표시할 위치와 title 객체 배열입니다 let positions = [ { title: '전대 메가박스', latlng: new kakao.maps.LatLng(35.1726364128528, 126.91255590973) }, { title: '현대자동차 중흥대리점',..

Kakao 지도 Javscript API 는 키 발급을 받아야 사용할 수 있습니다. 그리고 키를 발급받기 위해서는 카카오 계정이 필요합니다. 키 발급에는 아래 과정이 필요합니다. 1. 카카오 개발자사이트 (https://developers.kakao.com) 접속 2. 개발자 등록 및 앱 생성 3. 웹 플랫폼 추가: 앱 선택 – [플랫폼] – [Web 플랫폼 등록] – 사이트 도메인 등록 4. 사이트 도메인 등록: [웹] 플랫폼을 선택하고, [사이트 도메인] 을 등록합니다. (예: http://localhost:8080) 5. 페이지 상단의 [JavaScript 키]를 지도 API의 appkey로 사용합니다. 6. 앱을 실행합니다. index.html에 코드를 작성한다. API를 사용할 파일 상단에 작성..

antd에서 Table안 row를 클릭 시 이벤트 지정은 onRow 속성을 추가하여야 한다. { return{ onClick : ( )=>{ }, .... // row에 대한 각종 이벤트를 할당한다. onEvent : ( ) => { } } }} />