react validation 검색 결과

해당 글 3건

[Legacy][React] react-hook-form - 4 (useFormContext)

[React] react-hook-form - 4 (useFormContext) 컴포넌트가 커지는 경우 작은 컴포넌트로 1개의 컴포넌트를 나누기 시작한다. 즉, 1개의 컴포넌트를 만들기 위해 여러 컴포넌트를 사용한다. 이러한 경우 react에서 전역변수 개념인 useContext를 이용하면 하위 자식 컴포넌트에서 쉽게 부모 컴포넌트의 값에 접근할 수 있다. react-hook-form에서도 이러한 개념을 제공해주고 있다. useFormContext를 사용하면 FormProvider 자식 컴포넌트들은 부모 값을 쉽게 사용할 수 있다. 간단하게 알아보자. (홈페이지 참고 : 이동하기) useFormContext 사용하기 import { Controller, FormProvider, useFieldArray,..
기타 (+ Legacy)/Legacy 2021. 10. 16. 07:36

[Legacy][React] react-hook-form 배열 다루기 - 3

[React] react-hook-form 배열 다루기 - 3 이전 게시글에서 react-hook-form에서 배열 다루는 방법을 알아보았다. 그러나 원시타입의 경우 다루기가 힘들었는데 이러한 문제점을 해결할 수 있는 방법이 있긴하다. 첫 게시글에서 확인해본 useForm hook을 사용하여 다루면 된다. 간단하게 알아보자. (참고 : 이전 게시글에서 소개한 초기값, 출력과 같은 부분 설명은 제외함.) useForm으로 배열 다루기 import { Controller, useForm } from "react-hook-form"; const initValue = { numbers: [""] }; const Basic = () => { // #1 watch, setValue, getValues const {..
기타 (+ Legacy)/Legacy 2021. 10. 15. 07:06

[Legacy][React] react-hook-form 소개 및 사용법 - 1

[React] react-hook-form 소개 및 사용법 - 1 React 뿐만이 아니라 웹, 앱 등 플랫폼을 개발한다면 form을 사용해야 하는 경우가 많이 있을 것이다. React에서 form을 다룰 때 사용하는 라이브러리가 여러 개 있지만 이번 게시글에서는 react-hook-form을 다루어보며 알아보도록 하자. 해당 게시글에 사용된 react-hook-form은 Version 7이니 참고하면 좋을 것 같고, react-hook-form의 자세한 소개 내용은 react-hook-form 공식 홈페이지에서 확인할 수 있다. 홈페이지 이동하기 다루는 내용 당연히 모든 내용을 여기서 다룰 수는 없다. 그래도 이 게시글 시리즈를 보고 난 후 react-hook-form에 대한 방향성을 얻어가 프로젝트에..
기타 (+ Legacy)/Legacy 2021. 10. 13. 07:37