일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- 서버동기화
- timepicker
- listener 1883
- setInterval 정지
- DataGridView 직접 입력
- pm2 확인
- 맥 어드레스
- invalid data
- mosquitto.conf
- DatePicker
- mySQL_Replication
- map이 undefined가 뜰 때
- 1883
- Replication
- 데이터테이블 데이터 넣기
- 공인IP
- pm2 설치
- pm2 시작
- setInterval 외부 정지
- html #select #option #multiple
- allow_anonymouse
- datagridview 직접입력
- transfer
- mosquitto
- setInterval 중지
- AntDesign
- pm2 상태 확인
- pm2
- setInterval clear
- c# datagridview 데이터 넣기
- Today
- Total
목록React (88)
개발 노트
props로 값을 전달할 때마다 props.속성을 작성하는 것은 번거로운 일이다. 그래서 비구조화 할당을 사용해서 간단하게 작성하는 법을 사용하자. 기존 props를 전달할 때 export default function MyComponent (props){ return ( {props.name1}는 NewJeans 멤버입니다. {props.name2}는 NewJeans 멤버입니다. {props.children}이는 NewJeans 멤버입니다. ) } 비구조화 할당을 사용 export default function MyComponent ({name1, name2, children}){ return ( {name1}는 NewJeans 멤버입니다. {name2}는 NewJeans 멤버입니다. {children..
props는 부모 컴포넌트에서 자식 컴포넌트로 값을 전달할 때, 사용한다. 이때, 값을 전달하지 않았을 경우 default 값을 줄 수 있다 ex) 자식 컴포넌트에서 컴포넌트명.defaultProps = {변수명: 값} 또한, 사이에 내용을 보여주는 children가 있다. ex) 자식 컴포넌트에서 {props.children}이라고 작성하면 컴포넌트 사이에 내용을 전달한다.
거쳐야 하는 단계가 적다면 상위 컴포넌트에서 하위 컴포넌트로 콜백함수를 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...
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/xjxgi/btsq69J34gW/YQscvgAzkUBenFHvZ0YKmk/img.gif)
화면에 버튼 하나를 만들어 주고 클릭하면 이미지를 변경해준다 { if (!changeMarker) { setImgShow("./service_img.png"); setChangeMarker(true); } else { setImgShow("./cow_img.png"); setChangeMarker(false); } }}>마커 변경 실행화면 [ 문제점 ] 마커 변경 버튼을 클릭하면 좌표와 줌 레벨이 초기값으로 돌아간다. useEffect에 imgShow 값이 변경되면 재렌더링 시키도록 했기 때문 [ 해결 ] 현재 좌표와 줌 레벨 값을 useState로 저장해두고 재렌더링 될때마다 저장된 값으로 변경시켜주면 해결된다. // 지도가 이동, 확대, 축소로 인해 중심좌표가 변경되면 마지막 파라미터로 넘어온 함수를..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bqIDpp/btsq0xecjKy/DKFyAYEPbqoj4xRVkyJKw0/img.png)
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: '현대자동차 중흥대리점',..