kokoball의 devlog
article thumbnail
[Why? 시리즈] 3장 - 왜 React Hook Form은 리렌더링을 발생시키지 않을까?
WEB/Why? 시리즈 2024. 8. 9. 15:55

이번 글은 리액트에서 폼 관련 라이브러리 중 가장 많은 사랑을 받고 있는 React Hook Form의 동작 원리에 대해서 알아보려고 합니다. 우선 Form Tag Elements를 알아보면서, 신뢰 가능한 단일 출처에 대해 알아보고, 리액트에서 폼을 다루는 방법과 React Hook Form의 동작원리 및 제어 컴포넌트와 비제어 컴포넌트의 차이점을 알아보도록 하겠습니다.   Form Tag Elements대표적인 Form Tag Elements는 input, textarea, select 이렇게 3가지로 볼 수 있습니다.아래 예시를 확인해 보면 Form Tag에 submit 이벤트를 감지하여 각각의 tag의 value Attribute에 접근하고 있습니다. // 코드 예시 1const form = d..

article thumbnail
Next.js + TypeScript + Tiptap로 텍스트 에디터 만들기
WEB/라이브러리 2023. 12. 11. 22:03

어느덧 1년을 마무리하는 12월이 되었습니다. (모두 올해 고생하셨습니다!) 저는 연말을 의미있게 보내기 위해 이곳 저곳을 기웃거리다가, 간단하더라도 실제 서비스를 오픈해 보고 싶은 마음에 친한 동생과 연말 이벤트를 만들게 되었습니다. 그러던 중 '텍스트 에디터' (웹 에디터)를 만들게 되었는데, 그 과정을 이번글에 작성해 보려고 합니다. 기술 스택 많은 개발자들이 사용하는 React 답게 텍스트 에디터 관련 라이브러리 또한 다양합니다. 사람들이 주로 사용하는 라이브러리로 React-Quill과 Tiptap을 꼽을 수 있었는데, 저는 이 둘 중 고민하다가 Tiptap을 사용하였습니다. 그 이유는 React-Quill은 XSS 보안 취약성이 있다는 이슈를 보았으며, 무엇보다도 최근 업데이트 및 패치가 감소..

728x90