728x90 분류 전체보기66 React 라이브러리 없이 모달창 만들기 모달창은 어떻게든 사용되기에 라이브러리 없이 만들어봤다. // 모달 버튼이 있는 페이지 // ModalTest.jsx import ModalPage from "./ModalPage"; import { useState } from "react"; export default function ModalTest() { // 모달을 보여줄지 말지 상태를 관리하는 state를 만들어준다. const [showModal, setShowModal] = useState(false); // 모달 버튼을 클릭하면 열리고 const openModal = () => { setShowModal(true); }; // 활성화된 모달창 밖을 클릭하면 닫힌다. const closeModal = () => { setShowModal(f.. 2022. 9. 17. React datepicker 사용하기/css react datepicker 사용하기 https://reactdatepicker.com/ React Datepicker crafted by HackerOne reactdatepicker.com package 설치 yarn add react-datepicker import DatePicker from "react-datepicker"; // 데이트픽커 import import "react-datepicker/dist/react-datepicker.css"; // 데이트픽커 기본 CSS import { ko } from 'date-fns/esm/locale'; // 한국어 변환 export default function DatePickerTest() { const [startDate, setStartDat.. 2022. 9. 15. React styled Component hover 리액트 스타일 컴포넌트에 hover 주기 // &:hover를 넣는다. const ButtonStyle = styled.button` &:hover{ background-color : skyblue; color : blue } `; 동일한 방식으로 :link , visited, active 등을 사용할 수 있다. 2022. 9. 9. redux Mock server(json-server) 사용하기 / .with POST MAN React를 사용하면서 서버와 연결하기 전, Post Man을 통해 임시로 서버를 연결해서 React의 view가 어떻게 처리되는지 보고싶을때, 데이터가 어떻게 들어가있는지 확인하고 싶을때 사용할 수 있다. postman https://www.postman.com/ Postman API Platform | Sign Up for Free Postman is an API platform for building and using APIs. Postman simplifies each step of the API lifecycle and streamlines collaboration so you can create better APIs—faster. www.postman.com Post Man을 쓰기 전에, 먼저.. 2022. 9. 2. 이전 1 ··· 9 10 11 12 13 14 15 ··· 17 다음 728x90
