728x90 개발일지64 React submit 이벤트 방지하기 기본적으로 가장 접하기 쉬운 submit 방지는 preventDefault()이다. const Header = ()=>{ const onSubmit = (e) =>{ e.preventDefault(); } return( onSubmit(e)}>입력 )} 하지만 가끔 똑같은 코드를 적어도 submit 방지가 되지 않는 경우가 있다. (직접 동일한 상황을 겪었을 때를 기준으로 생각해보면, 다른 컴포넌트와 겹치는 등의 경우로 예상된다.) 그런 경우에는 아래와 같이 작성해도 정상적으로 submit 이벤트가 중지된다. const Header = ()=>{ const onSubmit = (e) =>{ e.preventDefault(); } return( onSubmit(e)}>입력 )} 위와 같이 작성하면 같은 폼.. 2022. 10. 2. React 라이브러리 없이 페이지네이션 구현해보기 게시판처럼 페이지를 나눠서 데이터를 보여주는 방법을 라이브러리 없이 React에서 만들어봤다. 작동 순서는 접속 => 데이터 패치 => 페이지 처리 정도로 보면 되겠다. 데이터가 보여지는 컴포넌트 // Paginatoin.jsx import { useState, useEffect } from "react"; import { Paging } from "./Paging"; import axios from "axios"; export const Pagination = () => { const BASE_URL = "http://localhost:3001"; // 전체 데이터 const [commentList, setCommentList] = useState([]); // 로딩처리 const [isLoading,.. 2022. 9. 30. 자바스크립트 씹어먹기 2022. 9. 27. React-responsive mideaQuery 반응형 적용해보기 CSS mideaQuery를 사용하는 방법도 있지만, react-responsive 패키지를 통해 구현하는 방법이 있어서 적용해봤다. 패키지 설치 yarn add react-responsive useMediaQuery 세팅 // useMideaQuery.js import { useMediaQuery } from "react-responsive"; export const Desktop = ({ children }) => { const isDesktop = useMediaQuery({ minWidth: 481, }); return isDesktop ? children : null; }; export const Mobile = ({ children }) => { const isMobile = useMediaQ.. 2022. 9. 26. 이전 1 ··· 7 8 9 10 11 12 13 ··· 16 다음 728x90
