Today I Learn

next.js에서 스크롤 위치 복원 구현하는 방법 페이지 이동 후 뒤로가기 버튼을 선택하면 페이지 상단으로 스크롤이 이동되지 않고 스크롤이 유지되기를 원했다. 1. next.js는 scrollRestoration을 기본적으로 지원한다. next.config.js 파일에서 scrollRestoration을 true로 설정해주기만 하면 된다. 하지만 이 방법은 실험적인 방법이라고 하며 내 프로젝트에서는 동작하지 않았다. const nextConfig = { experimental: { scrollRestoration: true, }, }; module.exports = nextConfig; 2. 브라우저의 세션스토리지를 사용하는 방법 import { useEffect } from 'react'; import..

react에서 인쇄기능을 사용할 때 reat-to-print라는 라이브러리를 사용 할 수도 있지만 생각보다 간단한 기능이라 window.print() 함수를 사용하여 만들었다. import useRef from 'react'; import ReactDOM from 'react-dom'; const printRef = useRef(null); const onClickPrint = () => { if (ReactDOM && ReactDOM.findDOMNode(printRef.current)) { const printContent = ReactDOM.findDOMNode(printRef.current) as HTMLElement; const printContents = printContent.innerHTM..

리액트를 이용하여 모달컴포넌트를 개발하던 중 에러 발생 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. 해석: 경고! 언마운티드된 컴포넌트에 대해서는 상태 업데이트를 수행할 수 없다. 해당 작업은 수행되지 않지만 메모리 누수가 발생된다. 해결방법으로 useEffect의 cleanup function을 이용해라 에러코드 import { useEffec..

리액트에서 반복문을 사용하려고 할 때 아래와 같이 return문 안에서 for 문은 사용할 수 없다 // for문 사용불가 function App() { const Month = ["1월", "2월", "3월", "4월", "5월", "6월"]; return ( { for ( let i = 0; i ( {month} ))} ); }

react-number-format npm pakage를 이용하여 쉽게 구현할 수 있다. npm install react-number format 예제구현 - 1000 단위마다 콤마 찍기 import React from 'react'; import NumberFormat from 'react-number-format'; function App() { return ( ); } export default App; - 신용카드 넘버 포맷 import React from 'react'; import NumberFormat from 'react-number-format'; function App() { return ( ); } export default App; - 날짜 포맷 import React from 'r..

Install npm install geolib yarn add geolib Usage import { getDistance } from 'geolib'; Functions getDistance(start, end, accuracy = 1) 두 지리 사이의 좌표를 계산한다. getDistance는 최대 3개의 인수를 사용하는데, 처음 2개는 유효해야 한다. // 예제 getDistance( { latitude: 51.5103, longitude: 7.49347 }, { latitude: "51° 31' N", longitude: "7° 28' E" } );

Props란 리액트에서 컴포넌트에 지정한 속성들을 의미 어떠한 값을 컴포넌트에 전달할 때 props를 이용함 Props의 기본 사용법 App컴포넌트에서 Hello 컴포넌트를 사용할 때, name값과 color 값을 전달하고 싶다고 가정한다. App.js import React from 'react'; import Hello from './Hello'; function App() { return ( ) } export deafult App; Hello.js import React from 'react'; function Hello(props) { return ( Hello, {props.name} ) } export default Hello; props 내부의 값을 조회할 때 마다 props를 입력하고 있..