개요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 ..