Front-End/React5 React: flushSync 활용 beforeprint, afterprint 이벤트 처리 회사에서 jquery 를 사용한 프로젝트를 React 로 포팅하는 도중 beforeprint, afterprint 이벤트를 처리하는 함수를 마주했습니다. window.print() 를 호출하기 전, 화면의 특정 요소를 숨기고(.hide())사용자가 print 화면을 닫게 되면 다시 화면의 특정 요소를 보여주는(.show()) 로직이었습니다. printing이라는 상태를 통해 요소를 숨기고 보여주는 코드를 아래와 같이 작성했습니다.import { useState, useEffect } from "react";const printingExample = () => { const [isPrinting, setIsPrinting] = useState(false); const handleBeforeprint =.. 2024. 8. 1. React Portal https://ko.legacy.reactjs.org/docs/portals.html Portals – React A JavaScript library for building user interfaces ko.legacy.reactjs.org React Portal 은 부모 컴포넌트의 DOM 계층 바깥에서 DOM 노드를 렌더링하는 방법이다. 위와 같이 메인 app 의 영역 바깥에 modal 을 표현할 수 있는 를 생성할 때 쓰이는데, 이는 부모의 z-index 값이 작은 경우(예를 들어 1), 자식 컴포넌트의 z-index 가 커도 화면 상단으로 표시되지 않을 때 app-root 바깥에 modal-root 를 둠으로써 해결할 수 있다. React.createPortal 로 만들어진 요소는 app-root.. 2023. 10. 6. Next Module Alias @ https://nextjs.org/docs/app/building-your-application/configuring/absolute-imports-and-module-aliases#module-aliases Configuring: Absolute Imports and Module Path Aliases | Next.js Using App Router Features available in /app nextjs.org 절대경로와 상대경로는 다 알지만 Next 에서 Base URL 의 경우 "@/assets" 와 같이 @로 표시해서 사용할 수 있다. 2023. 9. 22. React snippets Visual Studio 에서 Extension 으로 React snippets 를 다운로드 받으면 함수형 컴포넌트를 만들 때, rafce 단축키로 리액트 기본 코드를 구현할 수 있다. https://github.com/ults-io/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.md#rafce 그 외에도 많은데 차차 알아가야지 2023. 9. 20. 이전 1 2 다음
