Today I Learn

리액트에서 반복문을 사용하려고 할 때 아래와 같이 return문 안에서 for 문은 사용할 수 없다 // for문 사용불가 function App() { const Month = ["1월", "2월", "3월", "4월", "5월", "6월"]; return ( { for ( let i = 0; i ( {month} ))} ); }

react-number-format npm pakage를 이용하여 쉽게 구현할 수 있다. npm install react-number format 예제구현 - 1000 단위마다 콤마 찍기 import React from 'react'; import NumberFormat from 'react-number-format'; function App() { return ( ); } export default App; - 신용카드 넘버 포맷 import React from 'react'; import NumberFormat from 'react-number-format'; function App() { return ( ); } export default App; - 날짜 포맷 import React from 'r..

Install npm install geolib yarn add geolib Usage import { getDistance } from 'geolib'; Functions getDistance(start, end, accuracy = 1) 두 지리 사이의 좌표를 계산한다. getDistance는 최대 3개의 인수를 사용하는데, 처음 2개는 유효해야 한다. // 예제 getDistance( { latitude: 51.5103, longitude: 7.49347 }, { latitude: "51° 31' N", longitude: "7° 28' E" } );

useEffect useEffect는 기본적으로 몇 가지 조건에 의해 작동하게 된다. 1. 페이지가 처음 렌더링 되고 난 후 2. useEffect에 배열로 지정한 useState값이 변경될 때 즉 useEffect는 랜더링, 변수의 값 혹은 오브젝트가 달라지게 되면 그것을 인지하고 업데이트 해주는 함수이다. useEffect는 콜백함수를 부르게 되며, 랜더링 혹은 값, 오브젝트의 변경에 따라 어떠한 함수 혹은 여러개의 함수를 동작시킬 수 있다. useEffect를 사용하는 방법 useEffect(() => {}); 가장 기본적인 형태이지만 잘 사용하지 않는 형태이다. Dependency가 없기 때문에 랜더링 할 때 한번, 그리고 어떤 작은 변화가 있을때마다 시시때때로 useEffect가 발생되므로 불필..

간편한 디자인을 위해 부트스트랩을 이용해보고자 한다!! react-bootstrap을 다운받고 임포트해주기 $ npm install react-bootstrap https://bootswatch.com/ Bootswatch: Free themes for Bootstrap Customizable Changes are contained in just two SASS files, enabling further customization and ensuring forward compatibility. bootswatch.com 위 사이트로 들어간 후 마음에드는 테마를 다운로드해준다. 나는 Minty를 다운받았다. 다운받은 css파일을 프로젝트에 넣어주면 끝!! https://react-bootstrap.githu..

Props란 리액트에서 컴포넌트에 지정한 속성들을 의미 어떠한 값을 컴포넌트에 전달할 때 props를 이용함 Props의 기본 사용법 App컴포넌트에서 Hello 컴포넌트를 사용할 때, name값과 color 값을 전달하고 싶다고 가정한다. App.js import React from 'react'; import Hello from './Hello'; function App() { return ( ) } export deafult App; Hello.js import React from 'react'; function Hello(props) { return ( Hello, {props.name} ) } export default Hello; props 내부의 값을 조회할 때 마다 props를 입력하고 있..

React에서 카카오 지도 api를 사용하려고 하는데 구글링을 해 보고 적용해봤지만 지도가 구현되지 않았다. 알고보니 React에서 네이버나 다음맵을 쓰려면 공식예제에 있는 방법을 사용하면 안되고 약간의 꼼수를 써야한다고 한다. 1. 네이버, 다음맵 스크립트 파일을 주입하기 위해 Script Load를 대신해주는 패키지를 설치한다 import Script from "react-load-script"; 2. Script Load 라이브러리로 스크립트가 로딩 시킴 3. 자바스크립트 파일 로딩이 완료되면 초기화 const container = document.getElementById("myMap"); const options = { center: new kakao.maps.LatLng(37.621975240..