개발자
프론트엔드 유효성 검사 어떻게 하시고 계신가요?!
진행하는 프로젝트에서 form에 관리하는 state들이 10개정도되는 편이라 recoil 이나 jotai로 state관리를 진행하고있습니다. 유효성검사가 필요한 부분들은 마찬가지로 const [nameError, setNameError] = usState('') 이런식으로 선언하여 name 변경시 setNameError(value ? 'error message' : '') 형식으로 관리하고있습니다. 각 state마다 이렇게 처리하니 추후 복잡해보이기도해서 더 좋은 방법은 없는지 어떻게 처리하고계신지 궁금해서 질문남깁니다 !
답변 3
삭제된 사용자
2024년 02월 21일
zod 와 같은 라이브러리를 사용해서 핸들링하는게 좋지 않을까요?
따로 라이브러리 사용하지 않더라도 특별한 예외 케이스가 아니라면 nameError 라는 state를 따로 만들 필요는 거의 없습니다(만들어야 하는 경우도 있긴함) name state를 가지고 nameError 또는 nameErrorMessage 등의 변수를 만들어서 쓰세요
리액트훅폼 같은 비제어컴포넌트 라이브러리 사용합니다
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 02월 21일
유효성 검사를 수행하는 데 관한 여러 방법이 있습니다. 복잡해 보이는 상태 관리 문제를 해결하는 가장 일반적인 접근 방식 중 하나는 폼 관리 라이브러리를 사용하는 것입니다. React Hook Form, Formik 같은 라이브러리가 많이 사용되고 있습니다. 예를 들어, React Hook Form을 사용하면 다음과 같이 간단하게 각 폼 필드의 유효성을 검사하고 에러 메시지를 관리할 수 있습니다: ```jsx import { useForm } from 'react-hook-form'; function MyForm() { const { register, errors } = useForm(); return ( <form> <input name="name" ref={register({ required: 'Name is required.' })} /> {errors.name && <p>{errors.name.message}</p>} {/* Other fields... */} </form> ); } ``` 위 코드에서 `register` 함수는 아래와 같은 역할들을 담당합니다: 1. form 의 state (onChange, onBlur, value) 를 연결합니다. 2. form의 입력값에 대한 유효성 검사 규칙을 등록합니다. 라이브러리 내부에서 모든 상태와 유효성 검사 로직을 처리하기 때문에, 개별적으로 에러 상태를 관리하는 부분을 제거하여 코드의 복잡도를 줄일 수 있습니다. 물론 해당 라이브러리를 사용하면서 커스텀 유효성 검사 규칙을 적용하거나, 에러 메시지 처리 방식등을 세부적으로 설정하는 것도 가능합니다. 하지만 각 프로젝트의 요구 사항과 복잡도에 따라 맞는 방법이 다를 수 있으므로, 여러 가지 방법을 고려해 보시는 것이 좋습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!