728x90 전체 글66 React useNavigate로 props 넘기기 useNavigate로 다른 페이지의 화면으로 이동할 때, props처럼 값을 넘기는 방법을 알아봤다. // 보내는컴포넌트.jsx import { useNavigate } from "react-router-dom"; const 어떤함수=()=>{ const navigate = useNavigate() let someDatas = { name:"hihi" value:"here" } return navigate(`/다른페이지주소`,{ state: someDatas });}> 다른페이지로 갑니당 } // 받는 컴포넌트.jsx import { useLocation } from "react-router-dom"; const 어떤함수=()=>{ const location = useLocation(); console.. 2022. 10. 5. CSS position을 알아보자 어떤 태그의 위치를 지정할 때 사용하는 position 요소는 타입을 선언하고 top bottum left right 속성으로 배치한다. relative 일반적인 문서의 흐름에 따라 배치한다. 요소 자기 자신의 원래 위치를 기준으로 배치한다. 원래 위치를 기준으로 얼마만큼 떨어질지 결정한다.(top bottom...) 위치를 이동하면서 다른 요소에 영향을 주지 않는다 문서 상 원래 위치가 그대로 유지된다.(개인적으로 header 나 무한스크롤 위치 지정 등에 이용 용이했다.) absolute 요소를 일반적인 문서 흐름에서 제거한다. 가장 가까운 위치에 있는 부모 요소를 기준으로 배치한다. 부모 요소 위치를 기준으로 얼마만큼 떨어질지 결정한다.(top bottom...) 부모 중 Position을 가진 요.. 2022. 10. 3. 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. JS와 React는 귀여워요 자바스크립트를 씹어먹을거예요 먹히는건 나였구요 타입스크립트한테 융통성이란건 없어요 리액트는 뭐든 다 수용해요 본 포스팅의 이미지 저작권은 게시자에게 있으며, 무단으로 도용/배포하거나 상업적으로 이용하는 것을 금지합니다. 왜냐면 너무 귀엽잖아요 2022. 9. 29. 이전 1 ··· 5 6 7 8 9 10 11 ··· 14 다음 728x90
