본문 바로가기

react3

[react] URL get 파라메터(parameter) 값 뽑아내는 방법 / URLSearchParams 함수 사용법 1. 현재 url 가져오기 2. 현재 url에서 get params 값 분리 3. URLSearchParams 함수를 통해 해시값 (키, 값 쌍)으로 만들기 4. 원하는 값 가져와서 사용 //keywords 파라메터 뽑아낼 때 const current = decodeURI(window.location.href); const search = current.split("?")[1]; const params = new URLSearchParams(search); const keywords = params.get('keywords'); ex : url 파라메터 중 keywords 값을 가져와서 사용하고 싶다면 params.get('keywords'); 라고 사용하면 됨 2021. 5. 21.
[react/es] 리액트 setState 값 적용 안될 때 이벤트 연결 하는 방법 #1 pakage.json "devDependencies" 아래 @babel/plugin-proposal-class-properties 추가 후 $npm install (yarn install) #2 construct 아래 선언해주던 state를 밖으로 빼고, 작성하던 setState형태도 arrow 방식으로 변경해 작성한다 그리고 함수호출 및 onClick에서 호출 방식도 아래와 같이 작성한다 #3 before / after 전체 소스 비교 import React, { Component } from 'react'; class Row extends Component { constructor(props){ super(props); this.state = { monitor_box_stat.. 2021. 3. 23.
React에서 다음 KaKao 지도 API 사용 하는법 - 클릭이벤트, 좌표를 주소로 변환 geocoder, 커스텀 인포윈도우 등 요점 정리 리액트로 인포 윈도우 넣는 방법, geocoder 좌표-주소 변환하는 방법 등은 kakao api에 나와있지 않아 좀 애를 먹었죠 그래서 시험치기전 보는 필승 공략집 처럼 요점 정리 노트 하나 만들어 놓으면 좋을듯 해서 작성해봅니다. 다음 지도 시작하기 단순하게 지도를 띄우는건 간단한 코드 몇줄만으로도 가능합니다 우선 kakao map api 키를 발급 받고 index.html head라인에 다음과 같은 코드를 추가합니다. 그런다음 맵을 구현할 컴포넌트인 를 만들고 다음과 같이 작성해주었습니다. /*global kakao*/ import React from 'react'; class PopUp extends React.Component { constructor(props) { super(props); }.. 2020. 3. 3.