#react-hook

리액트에서 라디오그룹이 원하는대로 동작하지 않아요..

react-hook-form을 사용하고있고, medias는 useFieldArray를 사용하는중인데요. medias에 feeFlag라는 값이 있고 이 값은 '1' | '0' 둘중에 하나인데요. 값이 0인 경우에는 라디오그룹에서 버튼이 yes/no 왔다갔다 선택이 되는데.. 서버의 값이 1인 경우에는 yes에서 고정된 상태로 no가 선택이 되지 않습니다. 뭐가 문제인지를 도통 모르겠어서요.. 이틀째 라디오그룹 버튼 선택이 안되는 문제에 막혀있습니다... ㅠㅠ

react-hook-form 및 react-table을 사용하면서 문제가 풀리지 않아서 질문드려요..

캠페인 데이터 안에 매체 데이터들이 있는데요. 매체 데이터의 이름으로 테이블을 만들고 테이블의 행을 클릭하면, 해당 행에 연관된 데이터를 보여주고, 수정이 가능한 폼?을 만들고있는데요. 캠페인 폼을 서브밋할 경우 매체에서 변경된 값은 정상적으로 콘솔에 찍히는데 테이블의 다른 매체를 선택해도 생성일이 변경되지 않는 문제가 있는데요.. 어떤게 문제인지 잘 모르겠습니다.. 첨부한 스크린샷에서 처럼 예를 들어.. 매체명11 - 생성일 5월1일 매체명22 - 생성일 5월2일 매체명33 - 생성일 5월3일... 이런식으로 데이터가 있다고하면 매체를 선택할때마다 생성일도 같이 변해야 되는데 변경이 안됩니다..ㅠ 폼 하나로 캠페인 및 캠페인 안에 있는 매체들의 데이터를 한번에 서브밋 하고싶어서 저런식으로 구성을했어요.. 뭐가 문제인지 도무지 모르겠어요.. 도와주세요!..

react-hook-form 복잡한 form에서 궁금점이 있습니다 !

안녕하세요 현재 진행하는 프로젝트에서 form을 recoil로 관리하고있습니다. 이유는 form과 화면구성이 너무 복잡한 형태라 props drilling도 심하고 (부모에서 자식까지 5~7 depth) 관리해야하는 데이터가 많아 store에서 관리하고있습니다. react-hook-form이 복잡한 form에서 효율을 낸다고 해서 마이그레이션 해볼까 생각중인데 궁금점이 있어 작성합니다 ! 1. 이렇게 전역적으로 관리를 해야하는 복잡한 form에서도 좋은 효율을 내고 전역 상태관리 라이브러리보다 좋은 방향일까요?! (FormProvider 를 사용) 2. form에서는 input 필드만이 아닌, tab클릭, 드랍다운 클릭, 체크박스 클릭, 이미지 업로드, 라디오 클릭 등등 이러한 경우가 많은데 react-hook-form 을 사용해도 좋은 방향인가요?! 어떨때 react-hook-form을 사용하면 좋은지 궁금합니다 !

Next.js 14 서버액션을 사용한 폼 데이터 처리 중 질문입니다.

next.js 14의 서버액션을 사용해서 사용자로부터 form으로 데이터를 입력받아 DB에 저장하고 첨부파일을 서버에 업로드하는 모듈을 개발중입니다. 문제점은, 첨부파일을 input으로 입력받아 서버액션 함수로 formData로 넘겨주는데, 서버액션 함수에서 첨부파일의 파일명에 한글이 포함됐을 경우 파일명의 한글이 유니코드로 보이는 문자열로 찍히고 있습니다. // Form.jsx "use client"; // [other code] export default function Form() { const [formState, formAction] = useFormState(inquiryAction, { success: undefined, message: "", }); const { register, handleSubmit, reset, formState: { errors }, } = useForm(); const onSubmit = (data) => { const formData = new FormData(); const jsonData = JSON.stringify(data); formData.append("jsonData", jsonData); data.attachment[0] && formData.append("attachment", data.attachment[0]); formAction(formData); }; return ( <form action={handleSubmit(onSubmit)}> // [other code] <FileInput label="첨부파일" {...register("attachment")} error={errors} resetTrigger={resetTrigger} /> // [other code] </form> ); } // inquiryAction.js "use server"; import { connectDB } from "./connectDB"; export async function inquiryAction(prevState, formData) { const fields = JSON.parse(formData.get("jsonData")); const attachment = formData.get("attachment"); console.log(attachment); } Form 컴포넌트는 클라이언트 컴포넌트이고, react-hook-form과 next14의 서버액션을 사용하기 위해, form의 action에는 react-hook-form의 handleSubmit함수에 onSubmit 함수를 인자로 전달합니다. onSumbit 함수에서 서버액션 함수를 가져와 처리를 하고 있습니다. 그런데 여기서 서버함수쪽에서 첨부파일을 받을 때 한글 파일명이 다 깨지고 있네요... 기존에 api route와 fetch api를 사용했을 땐 문제가 없었는데.. 제가 놓치고 있는 부분이 있을까요?

Textfield 공통컴포넌트 설계질문

현재 Textfield를 위한 공통 컴포넌트를 설계하고 있습니다. Textfield에서 maxlength와 현재 value의 갯수를 보여주는 기능과, react-hook-form을 사용할수 있으며, 아이콘(버튼)을 클릭하면 특정 이벤트가 수행되는등 여러가지 기능을 아울러 수행하여 어디든 사용할수 있도록 하고싶습니다. 설계하면서 고민이 드는것이 있는데요. 저는 이모든것들을 props로 제어하려 합니다. 이유는 다음과 같은데요! 합성컴포넌트로 설계할경우 아이콘, 버튼의 갯수가 늘어나거나 위치가 변경됐을때 변화에 유연하겠지만 Textfield와 같은 공통컴포넌트의경우 기능, 디자인이 잘 변화하지 않기때문에 이런 결정을 했습니다! 혹시 다른분들은 어떻게 설계하시고 계신가요? 또는 관련된 레포나 문서 추천해주시면 감사하겠습니다.

react-hook-form과 React Query를 데이터 조회용도로도 함께 쓰는 것이 과연 효율적일까요?

안녕하세요. 실무에서 react-hook-form과 React Query를 함께 사용하고 있는 FE 개발자입니다. 먼저 제가 알기론 react-hook-form은 CRUD 중, C(생성)와 U(수정)를 위해 쓰는 경우, 폼 제출 시 React Query의 mutate 함수를 호출하게끔 코드를 짜는 것이 일반적인 것으로 알고 있습니다. 이 때에는 분명 validation 처리 등의 작업을 (useState, useRef와 같은 react 내장 hook 대비) 효율적으로 진행할 수 있다는 점을 충분히 이해하고 있어요. 이제 궁금한 점은 데이터를 조회하는 경우입니다. 과연 useState, useRef와 같은 react 내장 hook 대비 react-hook-form을 사용하는 것이 효율적일까요? 예컨대 키워드 검색과 페이지네이션 기능이 들어간 목록에서 데이터를 조회해오는 경우, react 내장 hook + React Query를 사용한 코드와 react-hook-form + React Query를 사용한 코드를 각각 작성해보았습니다. (아래 코드 첨부) 제가 생각한 결과는 아래와 같습니다. 1. 검색어 입력, 페이지네이션 기능 사용간 리렌더링 횟수 기준으로 성능적인 차이가 없습니다. (동일) 2. 조회 요청이므로 입력에 대한 validation 처리 코드가 필요하지 않습니다. (동일) 3. 코드량은 react-hook-form보다 react 내장 hook을 사용한 것이 더 적습니다. (react 내장 hook이 우위) 위 결과를 토대로 저는 아무리 프로젝트에서 react-hook-form을 도입했다고 하더라도 데이터를 조회해오는 상황에서는 react 내장 hook을 사용하는 것이 좀 더 가독성도 좋고 유지보수성도 높을거란 생각이 드는데요. (물론 제가 react-hook-form 코드를 효과적으로 작성하지 못했을 수도 있습니다. 혹시 그렇다면 이 부분도 지적 부탁드려요!) 여러분들의 생각은 어떠신가요?

react-hook-form 정규표현식 관리 방법

안녕하세요, react-hook-form을 사용해서 프로젝트를 하고있습니다. 정규표현식을 react-hook-form에서 사용할 때 다양한 방법이 있는 것으로 아는데 보통 어떻게 구현하시나요? register함수에 pattern props를 사용하거나 ex) input 태그에 ...register({pattern:~}) yup라이브러리를 사용해서 match 함수를 쓰는 방법정도 찾아본 것 같습니다!

리액트 props, state

프론트엔드 개발자를 꿈꾸고 있는 미래지망생 입니다 지금은 국비 학원을 다니면서 html css js를 어느정도 배우고 React를 10일정도 배우면서 props state react-hooks를 배우고 다음주 월요일 부터 개인 프로젝트가 들어가게 되었습니다(학원스케줄) 저는 프로젝트 주제가 마땅히 없어 신한카트 페이지를 만들려고 하고있습니다 근데 막상 하려고 하니 컴포넌트는 나누지만 안에 들어있는 내용은 그냥 쌩 html로 작성한거 같아 전혀 react를 활용 못하고 있는거 같습니다 데이터가 변하지 않는것은props로 데이터가 잘 변하는 것은 state로 지정하라고 들었는대 막상 하니 뭐가 잘 변하는지 잘 안변하는지 이렇게 html 작성하드시 하는게 맞는지 어떻게 하면 좋을까요

react-hook-form의 기본값을 지정하는 방법

react-hook-form을 사용해서 간단한 폼을 만드려는데 혹시 기본값을 지정하는 방법이 있을까요? useEffect를 사용해서 기본값을 지정해보려고 시도해봤는데 필드가 여전히 비어서 나옵니다 ㅠㅠ. 코드 아래 있어요.