즐겁게, 코드

이틀 전 React 19의 stable 버전이 배포되었는데, 여러 번경사항들 중에서 크게 두 가지가 피부에 와닿았다. 하나는 더이상 ref를 하위 컴포넌트에 전달할 때 forwardRef를 사용하지 않아도 된다는 것이고, 다른 하나는 form submit의 동작이 살짝 변했다는 것이다.💡 만약 폼에서 다루는 데이터 및 검증 구조가 복잡해지거나, 컴포넌트 구조가 중첩된다면 react-hook-form을 도입해볼 것을 권해드립니다.먼저 React 18 이하에서는 폼 제출 코드를 다음과 같이 작성한다.// React @^18import { FormEventHandler } from "react";const App = () => { const handleSubmit: FormEventHandler = (e)..

개발을 진행하다 보면 문자열화된 DOM을 마크업에 렌더링해야 하는 경우가 종종 생기기 마련입니다.💡 문자열 형태의 DOM을 purify하는 이유는 DOMPurify 라이브러리에 잘 소개되어 있습니다.import parse from "html-react-parser";const App = () => { const purifiedString = parse("hello world"); return {string};};export default App;최근 진행하던 프로젝트에서 관련된 문제가 있었는데, 어떻게 문제를 해결했는지를 소개합니다.📝 TL;DR : DOM을 순회하며 탐색하거나 필터해야 할 때는 TreeWalker 객체를 사용해 보세요.먼저 흔한 모습은 아니지만, 모종의 이유로 백엔드에서 문자열 ..