# yup

sju4486

📒 오늘 공부한 내용 🔍수업목차 >[24-1] HOF와 로컬 스토리지를 활용한 기능 만들기 [24-2] react-hook-form [24-3] 검증 라이브러리(yup) ✅ HOF와 로컬 스토리지를 활용한 기능 만들기 브라우저 저장소를 이용하면 비회원 전용 장바구니를 구현할 수 있다. 쿠키, 로컬 스토리지, 세션 스토리지 중 어떤걸 선택해도 상관없다. 각 브라우저 저장소의 특성을 고려해 기획 의도에 적합한 저장소를 선택하면 된다. 그 중 가장 일반적인 로컬 스토리지를 이용해 비회원 장바구니 기능을 구현해본다. 📂 비회원 장바구니 기능 구현 1️⃣ fetchBoards를 이용해 데이터를 불러온다. 장바구니 담기 버튼도 함께 만들어준다. 2️⃣ 장바구니 담기 버튼을 클릭했을 때, HoF를 이용하여 해당하는 내용 데이터 객체를 받는다. 3️⃣ 해당 데이터 객체를 로컬 스토리지에 넣을 수 있는 형태로 가공해준다.

creyon0215

Index Intro HOF&로컬 스토리지를 활용한 기능 만들기 (예시 코드) 코드를 구현하며 쿠키, 로컬 스토리지, 세션 스토리지 중 어떤 것을 이용해도 좋다. 각 브라우저 저장소의 특성을 고려해 기획 의도에 적합한 저장소를 선택할 것 비회원 장바구니 기능 구현 1) fetchBoards를 이용해 데이터 불러온 후 장바구니 담기 버튼 만들기 2) 온클릭시 HoF 이용해 해당하는 내용 데이터 객체 받기 3) 해당 데이터 객체를 로컬 스토리지에 넣을 수 있는 형태로 가공 데이터를 그대로 로컬 스토리지에 넣으면 제대로 입력되지 않음([Object object])와 같은 식으로 들어가기 때문에 JSON.stringify 등을 이용해 꼭 string으로 변환해 넣어야 한다. 또 제외하고 싶은 데이터가 있을 때 d

wyswhsl21

개발기간이 2주뿐이여서 기능 구현에만 집중한 나머지 블로그 정리할 여건이 되지 않았다. mvp 기능까지 구현을 마친 상태에서 밀린 포스트를 작성하려고 한다. 내가 프로젝트에서 맡은 구현은 로그인과 회원가입 기능이고 내가 이 기능을 맡은 이유는 평소 경험하지 못했던 파트이기도 하고 한번쯤 유효성 검사 같은걸 제대로 할 줄 알아야 한다고 생각이 들었기 때문이다. _우리의 프로젝트에 회원가입 단계는 이렇게 진행된다. 1.먼저 이메일을 입력하고 회원가입 버튼을 누른다. 2.해당 이메일 주소로 백엔드에서 인증메일을 보내준다. 3.이름과 비밀번호를 입력하고 서비스 약관에 동의하여 회원가입을 마친다._ 프로젝트의 wire frame ![](https://velog.velcdn.com/images/wyswhsl2

hyorimm

React Hook Form React Hook Form 이란? React 내에서 From을 쉽게 제어하고 손쉽게 유효성 검사를 처리하도록 도와주는 라이브러리. 기존에 입력 필드들을 처리할 때면 state를 선언하고 각 입력 필드에 event를 연결해 value를 받아오는 과정을 거쳐야 한다. 회원가입, 설문조사 등 입력 필드가 많아 질 수록 제어하기 힘들어지고 유효성 검사를 처리하기 어려워지는데, react hook form을 사용하면 value와 onChange로 각 입력 필드에 대한 처리를 추가할 필요가 없고 state도 직접 관리할 필요가 없다. > React Hook Form 공식 문서 YUP Yup이란? 모델의 스키마를 정의할 수 있도록 하며, 유효 값 검증(validation), 형 변환(parsing), 원하는 값으로 조작(transformation)등의 기능을 제공하는 라이브러리이다.

kimdongeun12

What is React-Hook-Form? > 사용하기 쉬운 유효성 검사와 함께 성능이 뛰어나고 유연하며 확장 가능한 양식. Form 종류 React-Form : 순수 React로 짜여진 Form Redux-Form : redux에서만 사용이 가능하다는게 단점 Formik : 3년전까지만해도 유명했었음 클래스형에서 함수형으로 이동하면서 떨어짐(러닝커브가 심함) React-Hook-Form : 함수형에서 제공하는 Hook폼 (간단함) 현재 실무에서 가장 많이 사용함 Why React-Hook-Form? Less code. More performant > React Hook Form은 불필요한 재렌더링을 제거하면서 작성해야 하는 코드의 양을 줄입니다. React-Hook-Form은 리렌더가 되지않아요 React는 state가 변하면서 리

yj05037

로그인, 회원가입을 react-hook-form 사용해 바꿔보기 로그인 > UI부분 > ----- LoginInput 컴포넌트 부분 > --- LogInButton 컴포넌트 부분 > --- 회원가입 > --- 회원가입 UI부분 > --- createUserButton 컴포넌트 부분 > --- 회원가입 부분 input은 로그인input 과 동일하기에 따로 생성해주지 않았다.

zoo0

React-hook-form 제어 컴포넌트는 입력할 때마다 state에 저장되는 방식으로 동기화에 초점이 맞춰져 있다. ex) 안녕 -> ㅇ,ㅏ,ㄴ,ㄴ,ㅕ,ㅇ 비제어 컴포넌트는 state에 저장하지 않고 필요할 때 document.getElementById나 useRef로 가져오는 식으로, 어떤 onChange가 일어나지 않는다. React-hook-form은 비제어 컴포넌트라서 리렌더가 일어나지 않아 성능이 빠르다는 장점이 있다. form 안에서는 button type을 지정해줄 수 있는데 type을 지정해주지 않으면 디폴트값이 submit이기 때문에 button 안에 onClick을 만들어주어도 onSubmit이 실행되어 백엔드 API로 데이터가 전송된다. ![](https://

yj05037

어제수업내용을 정리해본다. 사실, 게시판 만드는데 배운걸 적용해보느라 시간이 훌쩍가... 오늘이 되었다. 늘 강조하시는 부분이지만, 코드를 유지보수 쉽게하기위해 리펙토링이라는 과정을 거쳐야한다. 코드를 간단하게 최대한 줄이는 것이다. 그러나 쉽지는 않았다. .. 폼을 자동으로 만들어주는 react-hooks-form 검증을할때 if문대신 사용이 가능해 훨씬 코드를 줄여주는 yup이라는 두가지 라이브러리를 사용해보았다. 그전에 과제로 내주셨던 비회원장바구니에 관해 리뷰를 간단히 해주셨다. 비회원의 경우는 로컬스토리지에 저장하게 만들어주기에 로컬스토리지를 배우고 적용해보다는 의미에서 내주신것같다. 나는.. 검색해보고 코드를 받아왔다. 대체 어떻게 하라는건지 너무막막해서였다. 리뷰해주신 코드이다. 해당부분은 리뷰용 코드이기에 기존의fetchBoard를 이용한것 같다. 이 부분이 내가 복사해온 코드이다. 리뷰를 듣고 코드를 다시보니 그제서야 정리가되었다. 먼저, loc

badassong

React-Hook-Form 이란? 폼들을 어떻게 하면 효율적으로 관리할 수 있을까? 폼 라이브러리 Formik이 원래 인기가 많았으나, 클래스형 컴포넌트에서 함수형 컴포넌트로 넘어가면서 '굳이 Formik을 써야하나?' 라는 인식이 생겨 굉장히 편리한 React-hook-form이 나왔다. 사용법도 쉬워서 요즘 많이 쓴다고 한다. React-hook-form이 리렌더링을 발생시키지 않는 이유! 비제어 컴포넌트 기반이기 때문이다. 제어 컴포넌트 - input창에 입력하면 setState가 발생해 stat

deepthink

이제 유효성 검사를 추가한 formik을 살펴보자. yup을 쓰는건 아니고, 먼저 기본적으로 if 문을 사용하여 유효성 검사를 하는 형태다. 유효성검사 커스텀한 유효성검사 함수 validate를 만들고, 그 안에 initialValue 중 유효성 검사가 필요한 애들을 조건문으로 정의한다. useformik 에서 initialValues 다음 validate를 부른다. 이제 input 값을 작성하고 다음 input을 작성할 때 조건이 맞지 않는다면 에러가 뜬다. 이때 onSubmit은 당연하게도 에러가 없어야 실행이 된다. (영상은 css가 하나도 없어서 구리네) 근데 아쉬운점은 하나의 인풋값을 작성하는 순간 모든 유효성검사의 친구들이 반응한다는 점이다. 뭔가 아쉽다! 계속 나아가보자.

deepthink

이번 프로젝트에서 방을 생성하는 모달을 만들어야 했다. 방을 만들며 몇몇 부분에 대해 유효성 검사를 해야했고, form의 형태로 백엔드에 데이터를 넘겨줘야한다. 리액트에는 form을 위한 다양한 라이브러리들이 있는데, 그 중 formik이라는 친구를 사용해보기로 했다. 구글링을 해보니 여기저기 파편화된 글로 각자의 방식으로 적혀있어 처음 적응하는 데 꽤 애먹었다. 최종적으로는 어느정도 원하는 형태의 form을 구현할 수 있었는데, 결론적으로 가장 도움이 된 건 역시나 공식문서였다. formik 튜토리얼 특히 formik은 회원가입 예제가 제일 많아서 회원가입에 쓰기 가장 쉬울 것 같다. 위 링크의 튜토리얼을 정말 차근차근 살펴본다면, 마지막엔 기본적인 유효성검증과 폼 데이터를 컴포넌트 형태로 구분하여 사용할 수 있다. 굳이? 싶다면, 사실 초반만 잘 익혀도 formik을 사용하는 데 무리가 없다.

tootb

회원가입 유효성 검사 아직 서버 연결이 되지 않아서 기다리는 겸 유효성 검사 부분 코딩을 먼저 진행했다. typescript로 진행하는 것은 처음이어서 검색을 하던 중, yup 이라는 좋은 라이브러리를 발견했다 yup으로 유효성 검사 코딩하기 1. 필요한 모듈 install 하기 react-hook-form yup @hookform/resolvers 다음 명령어를 통해 한 번에 install 한다 npm install react-hook-form yup @hookform/resolvers > 2. 회원가입에 필요한 항목 파악 이번 프로젝트 회원가입 페이지에서 필요한 항목은 다음과 같다 ![](https:

nanyong0214

✍react-hook-form > 우리는 이전까지 state를 직접 만들고 onchange함수도 일일이 만들어서 바인딩해주었음. 💡그러나, 폼 라이브러리를 이용하면 더이상 이러한 코딩을 하지 않아도 된다. 폼 라이브러리에는 react-form, redux-from, react-hook-form, formik 등이 있고 이러한 라이브러리는 검증, state 등 대신 해주는 기능을 갖고 있다. 그 중 가장 사용하기 쉽고 성능적으로 좋은 폼이 react-hook-form 이다. `yarn add react-hook-form` 설치 이전에 onChange함수안에 setState를 해주고 바인딩 했을 때 인풋창에 계속 입력할 때마다 렌더링이 발생했다.(굉장히 비효율적) 또한, 변화한 state를 받아서 다시 넣고 렌더링하기 때문에 굉장히 느림 💡그러나 react-hook-form은 등록함수가 실행 될

rlaclgns321

검증 라이브러리로 대표적인 것이 yup 입니다. 검증 라이브러리가 왜 필요하냐구요? 여태까지 우리는 해당 입력창이 비어있는지만 검증했습니다. 하지만, 검증은 더욱 복잡합니다. 숫자인지 문자인지, 최소 4자리를 만족하는지, 특수문자가 들어가있는지 등등... 이런 것들이 이미 다 만들어져 있어서 명령어 입력으로 해결된다면 얼마나 쉽고 간편할까요? yup을 사용하여 이런 문제들을 해결할 수 있습니다. yup_github yup은 react-hook-form에서만 사용할 수 있는 것이 아니며, 다른 폼 라이브러리들과도 함께 사용 가능합니다.

hjkdw95

Formik 리액트에서 form control을 보다 편하게 할 수 있게 해주기 위해서 만들어진 라이브러리. 보통 form을 리액트에서 사용하다 보면, 성능(re-render등)이슈도 신경써야하고, 일일이 state로 관리해야한다는 점도 은근 성가신데, 이런 귀찮은 일들을 깔끔하게 대신 처리해준다는 점에서 인기가 있다. 회원가입 처리 등 여러가지 form을 예외처리와 함께 다뤄야 하는 경우에 매우 쉽고 깔끔하게 사용할 수 있다는 장점이 있다. 사용법 아래 예제만 보아도 거의 모든 기능을 사용할 수 있다 Formik 생성하기 Formik은 컴포넌트 모양으로 생성해낼 수도, useFormik을 사용해서 변수에 담아 사용할 수도 있다. 생성한 이후, initialValues , validate , onSubmit , 등의 prop을 사용할 수 있다. initialValues : form에서 관리할 값들을 모아놓는 객체 validate : valida

hmds1606

useApolloClient 기존에는 useQuery를 사용해서 데이터를 불러오는 방법을 사용을 했다. 하지만 useQuery는 내가 원하는 시점에서 데이터를 불러오지 않고 그 페이지가 실행되면 바로 불러와지기 때문에 axios를 이용하여 원하는 시점에 불러오면 되지만 axios는 rest 방식이므로 graphql에 맞는 useApolloClient를 사용해보자! client.query를 이용하여 정보를 받아오면 되고 아래 예제를 살펴보자 useApolloClient을 이용하여 정보를 받아왔으며, client.query 부분을 변수에 담아 원하는 시점에가서 이용만 하면 끝이다! 변수를 글로벌 스테이트에 저장도 가능하여 글로벌 스테이트에는 토큰 정보 이외에도 로그인된 유저 정보도 등록이 가능하게 된다. > useQuery vs useLazyQuery vs useApolloClient useQuery: 페이지 열리자마자 자동으로 데이터 받아오고 화면에

huiju

React 지난시간 복습 로컬 스코프에 있는지 확인 후 없으면 클로저 스코프에 가서 스코프 체인 해서 가져온다 클로저 스코프가 2개인 경우 (펑션 안에 펑션 안에 펑션) asdfasf 가 끝나야 onclickmove가 끝나고 그게끝나야 aaa가 끝남 useApolloClient useQuery는 유저정보를 사용하는 페이지가 많다면, 모든 페이지에서 useQuery를 해와야 한다는 번거로움이 있다. useQuery를 효율적으로 사용하는 방법은? 여러가지 쿼리 방식 > useQuery: 컴포넌트가 열리면 바로 실행되며, data라는 변수에 fetch해온 데이터를 담아줌 useLazyQuery: useQuery를 원하는 시점에 실행 후 fetch해온 데이터를 data변수에

space086

학습목표 UseQuery를 axios처럼 사용할 수 있대 >> useApolloClient 폼을 자동으로 >> React-Hook-Form Validation 라이브러리 >> Yup 재사용을 위한 공통컴포넌트 >> Common-Component jsx가 있으면 하이오더 컴포넌트 없으면 하이오더 펑션 key={el.id} 삭제하고도 실행이 되야 함. useQuery를 axios처럼 사용하는 법 언제 사용하는가? 강제로 넣어주기

sssssssssy

요즘에는 사용자편의를 위해 Oauth 방식으로 로그인이 많이 이루어지는 추세지만, 자사 회원가입기능을 구현할 시에 onChange를 남발하지 않고 더 간단하게 구현할 수 있는 react hook form 이라는 라이브러리를 간단하게 사용해보면서 정리해본다. 공식문서에 나와있는대로 설치한 뒤 제일 기본적인 옵션들을 폼에서 불러온다. register 이름을 등록하고 등록된 이름으로 값을 조회할 수있다 watch register 값 확인하기 모두 확인하기 > 하나의 register 값 확인하기 > handleSubmit form 태그에 걸 수있는 함수로 지정해놓은 유효성검사가 다 통과 될 경우에만 수행된다 formState: { error

navida

1. useQuery를 axios처럼 => useApolloClient 여러가지 쿼리 방식 useQuery : 요청을해서 data를 받아오면 알아서 자동으로 그려줌 useLazyQuery : 어떠한 함수를 실행할 때 요청 이후 동작은 useQuery와 동일 useApolloClient : 데이터를 가져온 후에 변수에 담거나 알아서 가공해야함(axios처럼 사용가능) 로그인 버튼을 눌렀을때 유저정보를 받아오고 글로벌 스테이트에 유저 정보를 저장하여 여러 페이지에서 글로벌 스테이트 한줄로 accessToken을 이용할 수 있다. 사용하는 방법은 vscode에서 주석을 통해 설명하겠다. ![](https://velog.velcdn.com/images/navida/post/63acb4ef-a86b-48fc-9