# Formik

deepthink

이제 유효성 검사를 추가한 formik을 살펴보자.yup을 쓰는건 아니고, 먼저 기본적으로 if 문을 사용하여 유효성 검사를 하는 형태다.커스텀한 유효성검사 함수 validate를 만들고, 그 안에 initialValue 중 유효성 검사가 필요한 애들을 조건문으로 정의

deepthink

이번 프로젝트에서 방을 생성하는 모달을 만들어야 했다.방을 만들며 몇몇 부분에 대해 유효성 검사를 해야했고, form의 형태로 백엔드에 데이터를 넘겨줘야한다.리액트에는 form을 위한 다양한 라이브러리들이 있는데, 그 중 formik이라는 친구를 사용해보기로 했다.구글

khm9331

“render prop”란, React 컴포넌트 간에 코드를 공유하기 위해 함수 props를 이용하는 간단한 테크닉입니다.render props 패턴으로 구현된 컴포넌트는 자체적으로 렌더링 로직을 구현하는 대신, react 엘리먼트 요소를 반환하고 이를 호출하는 함수를

silverbeen

누가 아직도 useState useEffect 사용해서 input 정리 하니..

hjkdw95

언제까지 util/validate.js 만들어 사용할꺼야

woohm402

리액트 생태계에서 typescript, formik 과 react-query 는 아주 대중적인 라이브러리들입니다. formik 은 공식문서에 등장할 정도로 대중적이고 인정받은 폼 처리 라이브러리이고, react-query 는 server state 라는 패러다임을 제시

yukyung123

formik & yup

cookncoding

오랜만에 자기 전에 작성하는 TIL 😢

devky

웹 어플리케이션을 만들다 보면 다양한 폼을 사용하게 되는데, 그러한 여러가지 폼들과 여러 폼들을 사용했다면 state를 관리를 해야하는데, 수 많은 useState와 handler들이 만들어질거고 이러한 것들을 좀 더 편리하고 깔끔하게 해주는 redux-form, re

yoojeonglee

버튼 여러 개를 두고 그 중에 여러 개를 선택할 수 있도록 만들고 싶었다. 기능상으로는 checkbox와 유사한데 checkbox는 옆에 문구를 쓰는 것과 달리 본인은 버튼 자체에 텍스트가 있길 바랬다.다른 input text같은 경우 input에 들어가는 text를

moony_moon

FE 개발자로써 유효성 검사를 하다보면 되게 수고가 많아지는 경험을 하곤한다. 나도 첫 개인프로젝트를 진행할 때 commons 폴더에 function 하나를 빼놓고 해당 폴더안에서 이메일, 패스워드, 이름, 등 유효성 검사를 early exit 형태로 진행하도록 구현하

nsunny0908

[TIL 50] React | Formik과 Yup으로 form 핸들링

leemember

안녕하세요 오늘은 리액트에서 폼태그 유효성 검증을 쉽게 도와주는 Formik에 대해 깊이 다뤄보는 방법을 공유해 보겠습니다.사용시 useState hook을 사용하여 formValues, formErrors, isSubmitting에 대한 상태 변수를 설정합니다.for

haebin

Formik의 Form 내부의 컴포넌트에서 state값 careers을 사용했다. 그런데 해당 state값이 업데이트되었을 때 Formik의 initialValues는 정상적으로 갱신된 값이 할당되지만, 내부의 컴포넌트에서는 이전 state값을 그대로 사용하는 문제가