6월 10일 학습 목표
Hof
Hoc
컴포넌트(jsx)를 return
Hof
jsx를 리턴하지 않으면, 혹은 다른 것을 리턴하면...
id를 전달하는 방식은 중복을 야기할 수 있다 (비추천)
id를 사용하지 말아보자
그러면 어떻게 해당 게시물로 이동하지? HOF 사용하자
const~ 함수 선언
onClickMove() 함수 실행
onClick=onClickMove 실제로 누르는 부분
함수 안에 console.log(apple), console.log(banana)를 하면 10과 20이 나올 것
id를 따로 적지 않고, el.id를 적어주면 상단에서 boardId를 받아 사용한다.
이렇게 생긴 함수다!
event = 로컬 스코프
boardId = 클로저 스코프
외부함수에 있는 boardId를 참조하여 내부에서 사용 가능 (스코프체인)
클로저는 여러개 일 수 있다.
클로저가 많아지게 되면 함수가 누적되다보니, 가장 겉 (껍데기) 함수가 종료되지 않는다. 가장 안쪽에서 실행되는 프로그램이 오래걸린다면... 밖의 함수들도 종료되지 않아 메모리 낭비=> 남용하지 말것, 내부 함수는 간단하게 종료할 수 있는 것으로
useQuery를 axios 처럼 사용하는 방법
현재 로직
로그인버튼 클릭 -> 로그인 유저 정보 요청 -> 토큰 받아서 저장 -> 글로벌스테이트에 저장 -> 임시로 로컬스토리지에도 저장 -> 페이지 이동
If
엑세스 토큰만 저장하는 것이 아니라 유저정보까지 받아와서 글로벌스테이트에 저장해주면 좋지 않을까?
-> 상단에 useQuery 작성해 놓으면 페이지가 열리자마자 받아오려고 한다
-> 로그인 한 후에 해야 함 ㅠㅠ
-> axios는 로그인 이후에 가능함 (rest-api)
-> useQuery도 같은 방식으로 하려면 useApolloClient 사용하기
useApolloClient 사용하기 전 필요한 부분 정리하기
사용방법 (로그인 단일 페이지 기준)
1. client 만들기
2. 상단에 요청 쿼리 작성하기
3. 쿼리 사용해서 유저 데이터 받아오는 부분 작성하기 ➡️ accesstoken을 강제로 넣어놔야 한다 (아폴로셋팅이 반영되지 않은 부분이기 때문)
4. userInfo state , useRecoilState ➡️ store
5. 글로벌스테이트 저장 ➡️ 객체형식이니 JSON.stringify()
6. 필요한 곳에서 useRecoilState로 불러와 사용하기
useQuery() : 페이지가 열리면 자동으로 데이터를 받아와 렌더링
useLazyQuery() : 내가 원하는 시점에 함수를 호출해서 요청을 실행할 수 있다. 하지만 원하는 변수에 담아 사용할 수가 없다. 렌더링 용도
useApolloClient() : 2차적인 저장, 받아와서 바로 변수에 저장 (=axios) , 렌더링에 사용하지 않음
폼 라이브러리
컴포넌트를 만들 때
- 제어 컴포넌트 : controlled component (통제한다)
- 비제어 컴포넌트 : uncontrolled component (비통제한다)
장점 : value에다가 state에 넣어줌으로써 input값이 state값이 100% 일치한다는 것을 알게됨
단점 : Input에 작성을 할 때마다 state가 바뀌면서 리렌더링이 계속해서 일어난다
=> state를 저장하지 않고, getElement~, useRef 사용하기 / 이 경우 100% 확신할 수 없음
상황에 따라 제어-비제어를 활용하자
매우 중요한 상황만 제어, 일반적인 상황에서는 비제어
기존 라이브러리들이 대부분 제어방식24 -> 버벅임이 있었다
react hook form은 비제어방식이어서 사용해보자
설치할 것
yarn add react-hook-form
yup
yup
독립적으로도 쓰이는 yup
react-hook-form과 자주 사용한다
🤣🤣🤣🤣 기존에 if문을 사용해서 검증하던 것을 한 번에 할 수 있다 🤣🤣🤣🤣
설치 할 것
yarn add yup
yarn add @hookform/resolvers yup
error까지 이렇게 간단하게 입력이 가능하다!
isActive의 수많은 if...들 역시 formState.isValid로 대체 가능
정규표현식
/ 조건(형식, 정규표현식) /.test("검사하고 싶은 것")
원래 가지고 있는 의미 탈피 : \
숫자+문자 : \w
문자만 : [a-z]
숫자 : \d
없거나 한개 : ?
하나 이상 : +
여러개 : {3}, {4}, {5} => {3,4}
또는 : ,
~ 사이 : -
모든 : .
띄어쓰기 : \s
시작점 : ^
끝점 : $
=> 가지고만 있어도 true가 되기 때문에 , 정확하게 맞게 하려면 시작점과 끝점이 있어야함
내가 만든 정규표현식~
오늘 공부를 돌아보며
리팩토링해야 할 것이 산더미다!! ㅜ
게시판 부분은 아예 재건축을 해야 할 것 같다 ㅋ
그래두 공통컴포넌트를 이용하면 들쭉날쭉한 css도 정돈이 될 것 같아서 기분이 좋다
