Day 24)

송인호·2022년 6월 11일
0

dailyStudy

목록 보기
23/35

1교시

onClick HOF

지금 까지는 온클릭하여 페이지를 이동할 때 그 id값으로 이동하도록 router를 걸어 주었다.
하지만 좋은 방법은 아니다. 중복이 될 수도 있기 떄문에.
그래서 이제 id를 빼주고 옮기는 법을 알아보겠다.

눈에는 보이지 않지만 onClick 함수는 onClickMove(event) 가 숨어 있다. 그래서 event값이 들어 가 브라우저가 실행을 시켜준다..

그래서 id라는 속성을 적을 필요없이 onClick뒤에 ()로 el.id를 적어주면 id를 받아 onClick이 실행이 된다.

최종

use-apollo-client

useQuery를 쓰면 자동으로 요청이 들어가서 로그인 하기도 전에 fetch를 받는다.

그래서 로그인에 성공할 때 같이 로그인정보까지 가져오려면 어떻게 해야할까
use-apollo-client를 사용하면 된다.

client를 선언해주고,


받는 페이지의 query를 가져다 쓰고


정보 받아오고

글로벌 스테이트에 있는것을 사용한다.

2교시 폼 라이브러리

react-form -> redus-form -> formik -> react-hook-form
으로 폼 라이브러리가 있다.

react-hook-form 을 배워보겠다.

컴포넌트

  • 제어 컴포넌트 ( controlled )
  • 비제어 컴포넌트 ( uncontrolled )

현재 사용하는 방식은 스테이트가 바뀔 때 마다 페이지가 리렌더가 된다.
효율성이 많이 떨어진다. 속도가 느림

state를 사용하지 않으면 리렌더가 되지 않는다.
그래서 일반적으로는 비제어를 쓰고, 중요한 것( 비밀번호 ) 같은 것들은 제어를 쓴다.

비제어를 사용하기 위해 react-hook-form을 yarn add 시켜준다.

form 태그 : 하나로 묶는다는 의미

버튼에 타입을 줄 수 있다. reset을 하면 삭제된다.

submit을 하게 되면 onSubmit 에 있는 함수랑 바인딩 된다.

button 은 onClick을 주는 함수랑 바인딩 된다.
지금까지 한 방식

하지만 이제 type="submit"을 주고 form의 함수를 실행시킬 것 이다.

form 안에서의 버튼 타입의 default 값은 'submit' 이다.

그래서 onClick만 주고 싶다면 type을 button으로 바꿔줘야한다.

React-hook-form

이렇게 써주게 되면 알아서 다 만들어준다.

handleSubmit을 onClickSubmit에 묶어주면 writer,title,contents의 데이터들을 onClickSubmit 함수에 모두 집어 넣어 주게 된다.

데이터로 들어오게 되어 data만 넣어주면 알아서 객체에 담기는 것을 볼 수 있다.

3교시 Yup

에러 검증하기

react-hook-from과 yup 연결하기

스키마에 검증 사항을 입력해준다.

onChange가 되었을 때 검증을 한다. 조건을 걸어준다.

이렇게 하면 Error 내용까지 보여지게 된다.

Yup에는 isActive로 사용했던 버튼색 바꾸기한 것을 isValid 라는 속성으로 가지고 있다.
props로 넘겨주기만 하면 쉽게 사용할 수 있다.

정규 표현식

profile
프론트엔드 개발자

0개의 댓글