728x90 개발일지/React24 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. React input으로 이미지 업로드/미리보기 글을 작성하는 화면에서, 이미지를 업로드하고 미리보기 화면을 보여주는 방법을 알아봤다. // state 값으로 이미지 값 받을 준비 const [imgSrc, setImgSrc] = useState(''); // 미리보기 로직 - input의 onChange에 넣어줄 함수 const fileChange = (fileBlob)=>{ const reader = new FileReader(); // file, Blob 객체를 핸들링하는데 사용 // File, Blob 객체를 사용해 특정 파일을 읽어들여 // js에서 파일에 접근할 수 있게 도와줌 reader.readAsDataURL(fileBlob); // File 혹은 Blob 을 읽은 뒤 base64로 인코딩한 문자열을 //FileReader 인스턴스의 .. 2022. 8. 31. 이전 1 2 3 4 5 6 다음 728x90
