React Hook Form 필드 초기화 이슈, form의 state 이해하기

현장실습 인턴을 진행하던 중, 댓글이나 답글 기능을 만들면서 React Hook Form을 사용하게 되었습니다. React Hook Form은 폼 상태 관리와 유효성 검사를 간편하게 처리할 수 있게 도와주는 라이브러리로, 불필요한 리렌더링을 최소화하기 때문에 자주 사용하게 됩니다.예를 들어, useState를 사용한다면 input에 값을 한 글자 입력할 때 마다 리렌더링이 발생하기 때문에, form을 주로 사용합니다.그러나 댓글을 작성하고 나서 입력란을 초기화하는 과정에서 생각하지 못한 문제가 생겼습니다. 이번 글에서는 제가 실제로 겪었던 문제의 원인과 해결 방법을 알기 쉽게 설명하려고 합니다.React Hook Form의 기본적인 상태React Hook Form은 폼과 필드의 상태를 효과적으로 관리하기..

• format_list_bulleted React DeepDive
• · 2025. 3. 17.
• textsms

13. 리액트에서 사용하는 타입스크립트

HTML 타입 const usernameInput = document.getElementById('username') as HTMLInputElement; const submitButton = document.getElementById('submit') as HTMLButtonElement; 다음과 같이 HTML태그Element 형태로 DOM 노드에 대한 타입을 사용 가능. 이벤트 타입의 경우 이벤트에 따라 다양하게 있는데, 뭐 onClick의 경우 MouseEvent임. VSCode에서 하나씩 찾아보면 됨! React 타입 Prop : 인터페이스 이용 interface Props { className?: string; id?: string; children?: ReactNode; onClick: (e:..

• format_list_bulleted Upscaling
• · 2024. 4. 17.
• textsms

10. 리액트 쿼리 기초

리액트 쿼리를 아시나요? 예전에 이 글 을 통해 리액트 상태관리의 역사를 공부하면서 알게되었는데요. 코드잇의 강의를 통해 그 사용법을 학습한 내용을 정리하고자 합니다. 공식문서는 여기 서 확인할 수 있습니다. 우리가 방문하는 웹사이트들은 굉장히 복잡합니다. 수많은 데이터를 다루게 되는데, 편리하게 이 데이터들을 사용할 수 있어야겠죠. 그래서 여러 상태관리 라이브러리들이 등장했습니다. 대표적으로 많이들 사용하는 리덕스가 있겠네요. 그러나 리덕스는 클라이언트 상태 데이터(사용자가 버튼을 눌렀는지, 사용자가 값을 입력했는지 등)를 관리하는데 용이하여, 서버 상태 데이터를 관리하기엔 좋지 못한 부분도 있고 코드가 복잡해질 수도 있다고 합니다. 그래서 리액트 쿼리는 Redux의 과사용으로 복잡성 증가, 비동기 처..

• format_list_bulleted Upscaling
• · 2024. 3. 18.
• textsms