본문 바로가기

React

 (115)
[React] 페이지 이동시 스크롤 최상단 위치시키기 navigate를 통해 페이지 이동 후 스크롤이 아래에 똑같이 머무는 현상이 발생했다. 이를 해결하기 위한 코드는 다음과 같다. ScrollToTop 컴포넌트 생성 import { useEffect } from "react"; import { useLocation } from "react-router-dom"; export default function ScrollToTop() { const { pathname } = useLocation(); useEffect(() => { window.scrollTo(0, 0); }, [pathname]); return null; } BrowserRouter안에 컴포넌트를 import 시킨다. 그럼 페이지 이동시 최상단으로 스크롤을 고정할 수 있다. https://c..
[error] input 창 수정시 기존값 관련 오류(A component is changing an uncontrolled input to be controlled.) 수정페이지 구현을 위해 input 에 api를 통해 기존 값을 받아오자 아래와 같은 에러가 발생했다. Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info input에서 부터 발견한 에러인데 그 전까진 없다가 수정시에 발생했다. 이는 기존 value에 값..
[React] 팝업 띄우기(feat. Modal, 오늘 그만 보기) 사이트의 메인 페이지에 들어갔을 때 모달창이 뜨고 그 안에 '오늘 그만 보기' input checkbox에 체크를 하고 '닫기'를 누르면 모달창이 닫히도록 구현하고자 한다. 설치 npm install react-cookie npm install dayjs 사용 import { useEffect, useState } from 'react'; import { useCookies } from 'react-cookie'; import Modal from '@mui/material/Modal'; import Paper from '@mui/material/Paper'; import dayjs from 'dayjs'; export default function MainPopupModal() { const [isMod..
[React] lottie-react 사용법 (lottie 애니메이션) https://lottiefiles.com/ LottieFiles: Download Free lightweight animations for website & apps. Effortlessly bring the smallest, free, ready-to-use motion graphics for the web, app, social, and designs. Create, edit, test, collaborate, and ship Lottie animations in no time! lottiefiles.com 위 사이트에서 가입후 사용이 가능하다. 사이트에서 원하는 Lottie의 json을 다운받는다. (색 , 시간 커스텀도 가능) 설치 https://www.npmjs.com/package/lotti..
[React] 남은 시간 타이머 구현 (feat:day.js) [마켓컬리 클론코딩- 타이머 구현] 정해진 기한의 값을 받아와서 현재시간과의 차이를 구해 남은 시간을 계산하는 타이머를 만들고자 한다. 현재 day.js 라이브러리를 사용하고 있어 이를 활용하였으며, 활용도를 높이기 위해서 커스텀 훅을 사용하여 만들었다. 사용 커스텀 훅을 사용하는 컴포넌트는 다음과 같다. targetTime: 기한 날짜(언제까지인지 날짜 작성) export default function TimeArticle() { const targetTime = '2023-07-29 00:00:00'; const { remainingTime } = useCountDownTimer(targetTime); return ( {remainingTime} ); } 타이머 커스텀 훅 import { useEff..
[React] 정상가, 할인된 금액이 있을 경우 %퍼센트 구하기 아래와 같이 따로 ts파일을 만들어서 %를 구하는 함수를 구현했다. regularPrice: 정상가 discountedPrice: 할인된 가격 percent를 구한후 Math.floor를 통해 소수점자리는 제외한다. export default function calculatePercent( regularPrice: number, discountedPrice: number ) { const discount = regularPrice - discountedPrice; //정상가에서 할인된금액을 빼서 얼만큼 할인되었는지 금액을 구한다. const percent = (discount / regularPrice) * 100; //toFixed:소수점자리제외/할인된금액의 %구하기/.toFixed(0) 는 소수점을 ..
[React] 쿠키 저장하기 (react-cookie/서브 도메인 달라도 쿠키 공유) 세션스토리지는 도메인이 다를 경우 공유가 되지 않기 때문에 쿠키를 사용하려고 한다. test.com 과 admin.test.com 으로 서브도메인만 다른 도메인2개가 있는 상황이다. 한 사이트에서만 쿠키를 저장해도 다른 사이트에서도 저장된 쿠키가 유지되도록 할 예정이다. localstorage에서 테스트시 만들어 둔 하나의 사이트를 가상의 2개의 도메인으로 만드는 방법은 저번 정리글을 참고하면 된다. 설치 npm install react-cookie or yarn add react-cookie 사용 1. index.jsx에서 를 통해 을 감싼다.(안해도 작동되긴 했음) import React from 'react'; import App from './App'; import { CookiesProvider..
[React] 숫자 세자리마다 , 콤마 붙이기 price가 50000과 같은 숫자일 경우 다음과 같은 코드를 통해 숫자 세자리마다 ,가 들어가도록 할 수 있다. (=>50,000) price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') React(79) 숫자 세자리 마다 콤마 붙이기(comma seperator) 입력창에서 기본중의 기본! 숫자입력시 세자리마다 콤마를 붙여보자. toLocaleString() 을 붙이면 해결 ! ....?? 이 안되기도 한다. (우리가 사는 세상은 그렇게 호락호락하지 않다 🥲) 숫자를 string 형 devbirdfeet.tistory.com

티스토리툴바