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

HTML body의 기본 Margin(흰 테두리)

열심히 컴퓨터종합설계를 하고 있던 저는 어마어마한 문제를 맞이했습니다. 분명히 모든 컴포넌트의 마진을 0으로 줬음에도 불구하고, 화면의 테두리에 흰색이 조금 남아있는 것입니다!!   잘 보일지 모르겠으나, 마진도 없고 패딩도 없고 백그라운드 컬러를 야무지게 그라데이션으로 설정해놨는데,테두리에 흰 색이 있는 겁니다!! 만능 킹 갓 제너럴 엠페러 지피티 형님한테 여쭤봐도 제대로 된 답을 주지 않더군요... 그러다 개발자 모드를 켜서 요소를 찍어보니 어마어마한 사실을 발견했습니다.아무런 스타일 옵션을 주지 않았음에도 불구하고,이미지와 같이 body에 무려 8px의 마진이 설정되어 있었습니다. 이 얼마나 억울한 일입니까?알아보니 예전엔 이런게 있어야 편해서 기본값으로 설정되어 있는건데, 여전히 이게 남아있는거라..

• format_list_bulleted Upscaling
• · 2024. 5. 1.
• 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