Front-End/React6 javascript 의 try-catch, React 에서는 불필요할까? 대세가 되어버린 React 에서 컴포넌트를 ErrorBoundary 로 감싸는 것 말고try - catch 는 어떻게 사용하면 좋을까에 대한 의견이다. React 에서는 ErrorBoundary 가 try-catch 와 매우 유사하게 작동한다.하지만 try-catch는 명령형 프로그래밍에 보다 적합하고 React 와 같은 선언형 프로그래밍에는 ErrorBoundary가 보다 포괄적이다.ErrorBoundary에서 포착하지 않는 것이벤트 핸들러비동기적 코드 (예: setTimeout 혹은 requestAnimationFrame 콜백)서버 사이드 렌더링자식에서가 아닌 에러 경계 자체에서 발생하는 에러일반적인 에러처리일반적인 상황에서는 그냥 ErrorBoundary 클래스를 선언하고 에러처리를 하면 된다.Er.. 2025. 5. 27. 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. TypeError Cannot read property 'setState' of undefined 주로 React Hook 을 사용해서 컴포넌트를 제작하는데 가끔 하나의 컴포넌트에 여러 state가 필요할 때 Class 컴포넌트로 작성하곤 한다. 처음으로 Typescript로 Class형의 컴포넌트를 만드는데 제목과 같은 오류가 발생했다. 해결방법은 간단하다. class 내 function 들을 화살표 함수로 작성해주는 것! (https://devlog.jwgo.kr/2018/08/20/set-state-undefined-error-in-react/) 바인딩이 안 되어서 그렇다는데 굳이 이걸 하나씩 .bind함수로 묶어주는 것보다는 화살표로 간단하게 쓰겠다. 2022. 2. 10. 이전 1 다음
