TIL/React 3

React Datepicker 라이브러리 사용하기

자바스크립트로 DatePicker 만드는 과제를 하면서 혼자 굉장히 어려움을 겪었는데(?),, 리액트에서는 DatePicker 라이브러리를 사용할 수 있다! good 🕊️ 아래는 공식사이트인데, 조금만 공부해도 손 쉽게 깔끔한 DatePicker를 가져올 수 있음 ! https://reactdatepicker.com/#example-external-form React Datepicker crafted by HackerOne reactdatepicker.com 📝 설치하기 설치는 npm으로 해준다. 설치 후에 package.json 파일을 열어 설치가 잘 되었는지 확인해주기 npm install react-datepicker --save 📝 사용하기 사용법은 정말 간단하다. 공식 사이트를 참고하여 작업하면..

TIL/React 2023.03.04

[TIL] 컴포넌트 반복하기 - map() 함수 사용

리액트로 무언가를 만들다보니 반복적인 코드가 꽤나 많이 나왔고, 이 코드를 계속 나열하다보니 왕왕초보인 내가 봐도 굉장히 길고 보기만해도 현기증나는^^,, 단순 반복의 코드들이 작성 되어 있었다. 이럴때 자바스크립트 map() 함수를 사용하면 컴포넌트를 더 효율적으로 관리할 수 있다 📝 자바스크립트 배열의 map() 함수 map() 메소드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하는 함수이다. 즉, callbackFunction을 실행한 결과를 이용해 새로운 배열을 만들어 낸다. 예제코드 var numbers = [1, 4, 9]; var doubles = numbers.map(function (num) { return num * 2; }); // dou..

TIL/React 2023.02.15

useRoutes() may be used only in the context of a <Router> component

useRoutes() may be used only in the context of a component. 오류를 직역하자면.. 'useRoutes'는 로 감싸야 한다는 뜻 import { Route, Routes } from "react-router-dom"; import Issue from "./pages/Issue"; function App() { return ( ); } 처음에 오류가 났던 코드이고 import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; import Issue from "./pages/Issue"; function App() { return ( ); } import에 'BrowserRouter as Ro..

TIL/React 2023.02.07