웹뷰 환경에서 사용할 리액트 공통 모달 컴포넌트 만들기

웹뷰 환경에서 팀 공통 모달 컴포넌트 만들기시대생 앱을 웹뷰로 리빌딩하게 되면서 공통으로 사용할 모달 컴포넌트를 새로 만들었다.특히 웹뷰 환경을 고려해 최대한 심플하고, 커스터마이징 가능한 구조로 설계했다.이번 글에서는 모달을 만들면서 어떤 고민을 했고, 어떤 선택지를 두고 결정했는지, 또 아쉬운 점과 앞으로 더 발전시킬 수 있는 부분까지 기록해보려고 한다.1. 모달 설계에서 고민했던 점처음에는 단순히 isOpen, title, description, primaryButton, secondaryButton 같은 props만 받는 구조로 시작했다.하지만 바로 몇 가지 고민이 들었다.description을 문자열(string)만 받을까? 아니면 ReactNode로 받을까?Footer 버튼 2개만 고정할까? ..

• format_list_bulleted React DeepDive
• · 2025. 4. 27.
• textsms

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