작심삼일 개발이야기

React Hook Form을 통해 동적으로 변하는 폼 상태를 관리하기 위해 useFieldArray를 사용하고 있었습니다. 문제없이 폼 상태를 동적으로 잘 관리한다고 생각했는데 막상 제대로 동작하지 않는 이슈를 발견했습니다. 해당 이슈를 기반으로 간단한 예시를 만들어서 설명하겠습니다. 요구 사항 1. 회원의 이름과 나이를 작성할 수 있는 폼 2. 추가 버튼 클릭 시 회원을 여러 명 등록하도록 input 요소 추가 3. 더미로 변환 버튼 클릭 시 해당 요소의 이름은 dummy로 변경, 나이는 입력 값 그대로 유지 예상 구현 방법 1. 회원의 이름과 나이를 작성할 수 있는 폼 -> input, button 요소와 React Hook Form 연동 2. 추가 버튼 클릭 시 회원을 여러 명 등록하도록 inpu..

폼을 작성할 때, 여러 가지 조건이 발생하는 경우가 있습니다. 특정 값을 선택했을 때만 입력 필드가 나타나야 하거나, 특정 값이 선택되었을 때는 필수 입력 필드가 되지만 다른 값이면 필수가 아닌 등 다양한 상황이 발생할 수 있습니다. 이런 상황에서 Yup의 when 메서드를 사용하면 원하는 조건에 따라 유효성 검사를 동적으로 설정할 수 있습니다. 공식문서의 예시코드를 가져와 when의 사용법에 대해 설명하겠습니다. when의 타입은 아래와 같이 정의되어 있습니다. Schema.when(keys: string | string[], builder: object | (values: any[], schema) => Schema): Schema when 메서드는 두 개의 매개변수를 사용하며, 첫 번째 매개변수는 ..

React Hook Form을 사용하여 폼을 만들 때, 마지막 단계로 폼의 유효성 검사를 하는 것은 중요한 과정 중 하나입니다. 이때 유효성 검사란 사용자가 입력한 데이터가 원하는 규칙에 부합하는지 확인하는 작업을 의미합니다. React Hook Form에서는 register 메서드를 사용하여 각 입력 필드에 대한 유효성 검사 규칙을 정의할 수 있습니다. 그러나 폼이 복잡해지고 유효성 검사 규칙이 많아질수록 JSX 코드는 복잡해지고 가독성이 떨어질 수 있습니다. 이런 상황에서 Yup을 사용하면 유효성 검사 규칙을 한 곳에서 효과적으로 관리할 수 있습니다. Yup은 선언적으로 유효성 검사 규칙을 정의할 수 있어 코드의 일관성을 유지하고 가독성을 향상합니다. 따라서 JSX(TSX) 코드에서는 각 입력 필드에..

폼을 작성할 때 폼 양식을 추가하거나 삭제하는 경우가 생깁니다. 예를 들어, 여러 명의 직원을 추가하거나 삭제하는 폼을 만들 때, useFieldArray를 사용하여 폼 데이터를 유연하게 관리할 수 있습니다. 이를 통해 폼의 양식을 동적으로 조작할 수 있습니다. 아래의 코드 예시를 통해, 직원의 이름과 나이를 받아 폼을 작성하고 추가, 삭제, 수정하는 방법을 확인해 보겠습니다. import { useFieldArray, useForm } from "react-hook-form"; interface Form { person: { name: string; age: string }[]; } const Page = () => { const { control, register } = useForm({ defaul..

폼을 만들 때, 다양한 입력 방식을 다루다 보면 input 뿐만 아니라 select(dropdown), calendar 등의 컴포넌트를 사용하거나, 외부 라이브러리(React-Select, AntD, MUI 등)를 통해 폼을 구성하는 경우가 있습니다. 이때 useForm의 regitser를 연결하는데 어려움을 겪는 경우가 생깁니다. 이런 상황에서 Controller를 사용하면 useForm과 해당 컴포넌트를 효과적으로 연결하여 폼 상태를 관리할 수 있습니다. 아래는 직접 만든 Dropdown 컴포넌트를 예시로 설명한 코드입니다. import { useState } from "React" interface DropdownProps { dropdowns: {key: string; label: string}[..

form의 로직을 작성할 때, 페이지 단위에서 컨테이너 단위로 쪼개 개발하다 보면, 가장 최상위에서 위치한 커스텀 훅에 존재하는 React Hook Form의 메서드들을 각 컨테이너의 props로 전달해야 할 때가 있습니다. 아래의 예시 코드를 살펴봅시다. // 여러 폼 로직을 포함한 커스텀 훅 const useCustomFormHook = () => { const { watch, register } = useForm(); return { watch, register } } // Name, Age로 이루어진 페이지 const Page = () => { const { watch, register } = useCustomFormHook(); return ( ) } const Name = ({watch, re..

SunEditor를 사용해서 공지사항 WYSIWYG 기능을 구현하고 있었고, 이미지 업로드 리팩토링이 필요해서 정리해 두면 좋을 것 같았다. Editor를 사용해서 글을 작성하면 HTML로 이루어진 코드를 확인할 수 있다. 글 작성과 함께 추가한 이미지는 base64로 인코딩 되어 HTML코드에 입력된다. 인코딩 된 base64 데이터는 이미지의 품질을 떨어뜨리고 데이터 크기를 늘어나게 하는 단점이 있어서 추가한 이미지는 S3로 업로드하고 업로드된 주소를 HTML코드의 img 태그 src속성에 치환하여 저장했다. 기존 로직 Editor에 글, 이미지 작성(HTML 코드로 작성됨) 이미지 추가 -> 글과 별개로 상태 값에 File 객체 추가 (상태값 2개 관리) 이미지 추가, 수정 될 때마다 File 객체..

🔍 해당 라이브러리를 선택한 이유 1. 글 좌우 정렬 2. 폰트 변경 3. 이미지 첨부 4. 텍스트 컬러 변경 위 4가지가 필요한 기능이었다. 많이 사용한다고 들었던 TOAST UI Editor를 사용하려 했으나 1번 요구사항이 만족하지 못해 다른 editor를 찾아보게 되었다. 여러 에디터가 존재했지만 해당 sundeditor는 위의 모든 요구사항을 충족하고, issue를 등록하면 빠르게 대답해주어서 맘에 들었다. 🔍 설치 및 버전 $ npm install --save suneditor suneditor-react "suneditor": "^2.44.3", "suneditor-react": "^3.4.1", 🔍 초기 렌더링 import React, { useRef } from "react"; impor..

라이브러리 없이 Form을 만들고 돌아보니 코드 양이 어마어마하다... React Hook Form을 사용해서 조금 더 쉽게 Form을 만들어보고 싶어서 도전! 아직 공부하며 사용 중이라 완벽하게 마스터하지는 못했지만 아는 것만 정리해보려 한다. 설치 npm install react-hook-form 사용법 const { register, handleSubmit, watch, formState: { errors } } = useForm(); register 유효성 검사에 사용할 요소를 register를 이용해서 연결한다. register에 사용할 수 있는 유효성 검사 목록은 아래와 같다. required (필수 값) min (최소 값) max (최대 값) minLength (값의 최소 길이) maxLen..

front-end 하면 빠질 수 없는 것이 Form이다. 하나하나 만들어서 관리하려니 코드도 길어지고 너무 힘들어서 라이브러리를 통해 관리해보려고 찾아봤다. 대표적인 라이브러리로 Formik과 React-hook-form이 있다. 이번에는 form라이브러리인 Formik과 유효성 검사 라이브러리 Yup을 사용해보려 한다. 제일 처음 formik과 yup을 설치하자 npm i formik npm i yup form에 사용 할 상태의 초기 값을 initialValues을 통해서 설정한다. const formik = useFormik({ initialValues: { firstName: "", lastName: "", channel: "", }, }); 초기 값을 사용 할 곳에서 value의 속성 값으로 초기..