들어가며 기존에 사용하던 ErrorBoundary는 React 공식 문서를 참조하여 class 컴포넌트로 정의했습니다. 이때 fallback UI의 타입은 ReactNode로 선언했는데, 실제로 사용하다 보면 이 타입만으로는 해결하기 어려운 상황이 생기기 시작했습니다.특히 Next.js, TanStack Query, Suspense를 함께 사용하는 환경에서는 비동기 에러 처리의 책임을 ErrorBoundary에 위임하는 패턴이 자연스럽게 등장하는데, 이 시점부터 두 가지 한계가 드러납니다. 첫째, fallback UI에서 어떤 에러가 throw되었는지 알 수 없다는 것, 둘째, 에러가 발생한 후 동일한 요청을 재시도할 방법이 없다는 것입니다.이 글에서는 이 두 가지 문제를 어떻게 해결했는지 공유합니다. ..

개요useEffect clean-up을 작성할 때 발생하는 eslint의 consistent-reutrn 에러에 대한 내용입니다. consistent-return해당 에러는 함수의 반환 방식을 일관되어야 하는 규칙입니다. 특정 조건 ( if )에 따라 함수가 값을 return 하다가 undefined를 return 하는 듯한 일관성이 깨지면 해당 에러가 발생합니다.이 규칙을 통해 사용하는 측에서 undefined를 올지 값이 올지에 대한 타입 추론이 불안정 하고 항상 undefined를 체크해야 하는 문제를 방지할 수 있습니다. 문제가 발생했던 코드useEffect(() => { if (조건) return; ... return () => {...};}, []); useEffect clean-upus..

TLDRReact에서 Functional Component가 아닌 함수에서 하나의 property로 ReactElement를 받아서 렌더링 하려고 하다가 발생한 에러입니다. 해당 type을 React.ReactElement로 선언하고, 사용하는 곳에서 JSX 형태의 UI를 넣자, ' JSX 요소 형식에 구문 또는 호출 시그니처가 없습니다.' 에러가 발생했습니다. 코드export interface Types { UI: React.ReactElement;}...tmpFunction(); 다음과 같이 type을 선언하고 함수에 Component를 발생하니 위 스크린샷 에러가 발생했습니다. 문제해당 에러가 발생하는 이유는 React.ReactElement와 는 엄밀히 보면 다르기 때문입니다. Componen..

React에서 HTML 문자열을 렌더링해야 하는 경우가 있습니다. 이런 상황에서 dangerouslySetInnerHTML을 사용하게 되는데, 이는 보안과 성능 측면에서 여러 문제를 일으킬 수 있습니다. HTML 아무 제약 없이 그대로 출력된다는 건 XSS 공격의 위험이 있고, 사용자 입력값이 직접 DOM에 주입될 수 있어 위험합니다.또한 React의 Virtual DOM 을 우회하게 되어, 최적화되지 않고 불필요한 리렌더링을 통해 성능 저하의 원인이 될 수 있습니다 대안 : html-react-parse + DOMPurify npm install html-react-parser dompurify @types/dompurify dangerouslySetInnerHTML을 대신하기 위해 위 두 가지 라이브..

안녕하세요 웹 프론트엔드 개발자 설탕시럽입니다. 프로젝트 내 axios를 활용한 중복 코드 제거를 위해 Axios Custom Hook을 만든 경험을 공유하고자 합니다. axios에서 중복되는 설정과 로직을 React의 Hook을 통해 묶어서 관리하고, 앞으로 재사용할 때에도 편의성을 주기 위해 이 과정을 거쳤습니다. 이번 글은 Writing a custom Axios hook in TypeScript for API calls in your React application 를 많이 참고해서, 참고한 김에 번역을 했습니다. 내부 코드의 일부만 프로젝트와 저에게 맞게 수정했고 텍스트는 모두 번역/의역 한 내용임을 미리 밝힙니다. 개요 Axios는 HTTP client에서 브라우저와 Node.js에서 API ..