Javascript&Typescript32 [React] Date picker 사용하기 ( + default 값으로 오늘 날짜) 날짜 new Date(); 로 오늘 날짜 현재 시간을 구한 후 문자열로 변환해 날짜에 해당하는 부분만 슬라이싱 해 오늘 날짜를 defaultValue로 한다. saleStartDate 역시 default 값을 오늘 날짜로 한다. src/pages/SalesRegistrationPage.js const dateNow = new Date(); const today = dateNow.toISOString().slice(0, 10); const [saleStartDate, setSaleStartDate] = useState(today); Date picker src/pages/SalesRegistrationPage.js return() setSaleStartDate(e.target.value)} inputPro.. 2022. 9. 8. [React] 버튼 클릭 이벤트 새로운 페이지로 이동하기 (button click to new page) 새로운 페이지 만들기 src/pages/PurchasePage.js import React from "react"; const PurchasePage = () => { return PurchasePage; }; export default PurchasePage; useNavigate() 사용하기 참고 : 2022.07.20 - [javascript/React] - [React] React app - 시작 로고 페이지 만들기 (useNavigate, setTimeout()) navigateToPurchase 에서 navigate 함수를 호출해 주소를 전달한다. navigate 함수에 인자로 주소를 넣어준다. src/pages/ListProductsSalePage.js const navigate = useN.. 2022. 9. 6. [React] material-ui Accordion에 map함수 적용하기 Accordion 참고 : https://mui.com/material-ui/react-accordion/ Accordion에 map함수 적용하기 src/pages/SalesRegistrationPage.js const [member, setMember] = useState([]); console.log("test", member); useEffect(() => { fetch("/member/select") .then((res) => { return res.json(); }) .then((data) => { setMember(data); }); }, []); DB에서 불러온 Member 테이블 log 출력 src/pages/SalesRegistrationPage.js return() {member.map.. 2022. 9. 4. [React] npm start 시 react-scripts: command not found 오류 npm install 후 다시 start 2022. 9. 2. [React] React app - 시작 로고 페이지 만들기 (useNavigate, setTimeout()) 앱 실행 시 로고 페이지가 몇 초 띄워진 후 다음 페이지로 넘어가도록 하는 시작 로고 페이지 만들기 useNavigate useNavigate hook 은 양식을 제출한 후 navigate 할 수 있는 함수를 반환. 사용법 import { useNavigate } from "react-router-dom"; function SignupForm() { let navigate = useNavigate(); async function handleSubmit(event) { event.preventDefault(); await submitForm(event.target); navigate("../success", { replace: true }); } return {/* ... */}; } navigate 함수.. 2022. 7. 20. [React] React app 만들기 react 새로운 프로젝트 만들기 Node >= 14.0.0 and npm >= 5.6 필요하기 때문에 먼저 node, npm, npx 버전 확인하기 node --version npm --version npx --version 새로운 프로젝트를 만들기 위해 아래 명령어 실행 npx create-react-app my-app cd my-app npm start my-app은 프로젝트 이름. 소문자를 사용한다고 한다. dress_up 프로젝트 생성 npx create-react-app dress_up ... 프로젝트 폴더로 가서 실행해보기 dress_up 폴더로 이동 cd dress_up 프로젝트 시작 npm start 실행 결과 localhost 3000번 포트(react의 기본 포트) 로 웹페이지가 실행.. 2022. 7. 20. 이전 1 2 3 4 5 6 다음
