1. 컴포넌트 이동 시 props 전달 방법 navigate 함수의 첫번째 인자로는 주소, 두번째 인자인 state에 전달할 데이터를 넣어준다. import { useNavigate } from "react-router-dom"; const navigate = useNavigate(); const onSubmit = (data) => { axios .post("post할주소", data) .then((response) => { if (response.status === 200) { navigate("이동할 주소", {state:response.data}); } else { alert("Submit failed!!"); } }) .catch((error) => { console.log(error); });..
프로젝트
React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm install react-icons --save Usa react-icons.github.io React-icons를 이용하여 홈페이지 디자인을 좀 더 좋게 바꾸어보기 시도.... 사용 방법은 아주 간단하다. 위의 홈페이지에서 알려주는대로 install하고 import해서 사용하면 끝!..
react bootstrap에도 스피너가 있긴 한데 더 다양한 모양의 스피너가 있는 react-spinners 라이브러리를 이용하여 만들어 보았다. 우선 둘 중 하나의 명령어를 사용하여 설치를 해주자. npm install react-spinners --save yarn add react-spinners 그리고 파일을 하나 만들고 다음의 페이지에서 맘에 드는 스피너를 선택하여 코드를 복붙하면 된다. 색상과 크기, 속도 등 다양한 옵션들을 설정 가능하다. Webpack App www.davidhu.io import React from "react"; import { FadeLoader } from "react-spinners"; function Loading() { return ( ); } export d..
Home React hook for form validation without the hassle react-hook-form.com ▲ react-hook-form 공식문서 폼에 react-hook-form을 적용시켜 보았다. react-hook-form은 폼의 유효성 체크를 쉽게 해주는 라이브러리로 사용해보니 코드의 양도 줄어들고 가독성도 올라갔다. usestate로 state를 여러 개 만들어서 관리해주지 않아도 되니 편리했다. 우선 react-hook-form을 설치한다. npm install react-hook-form yarn add react-hook-form 가장 기본적인 형태는 아래와 같다. const { register, handleSubmit } = useForm(); register..
우선 터미널에 아래와 같이 입력하여 axios 라이브러리 설치해주자. npm install axios 그리고 코드 상단에 import 해주기 import axios from "axios"; axios로 데이터를 받아오려면 get 요청을 하면 되는데, 다음과 같이 입력하면 된다. axios.get('GET요청할URL') .then(()=>{ 요청 성공 시 실행할 코드 }) .catch(()=>{ 요청 실패 시 실행할 코드 }) 나는 테스트하기 위해 public/data 폴더에 test.json이란 파일을 만들고 [ { "subject": "1번째 일기", "date": "2022/10/01", "representative_img": "test_img/1.jpg", "content": "한강 불꽃 축제" }..
