중고마켓부터는 리뷰가 들어가지 않음... ㅠㅠ

5주차 예정강의

오늘의 목표!!
rest 와 graphql 의 차이!!
글로벌 스테이트!

props의 실체

함수형 컴포넌트의 경우 위와같이 도 사용할 수 있다.
사실 컴포넌트를 실행하는방법이 함수를 실행하는 방법과 같을 수도 있네에에???

aaa 는 지금 우리가 맨날 사용하는 프롭스이다.
꼭 프롭스로 쓸 필요가 없었던것..! 그냥함수에 들어가는 매개변수였어...
이것이 프롭스의 실체...흡...!

el 의 실체!

map((el)=>console.log(el) 에서의 el???

얘도 그냥 el 이라는 매개변수를 arr 길이만큼 콘솔로그 해줘였는디...
그냥 얘도 aaa 로 해도 되는거였움...

프리브의 실체(prev)

얘도 프리브 일 필요가 없었돠...

그래프큐엘의 실체

writer 도 그럴 필요가 없었유....$붙은애들은 그냥 변수였다 그냥 통일 만 되면 된당..
이럴거면 그러지 말디..고생시키지 말디 ㅠㅠㅠ

그래프큐엘의 경우 묶음 요청을 할 수있었음! 레스트는 따로따로 에이피아이 요청을 했어야했는데!

얘도 mutation 뒤에붙은애가 그냥 그룹이름이어똿!!!!!
오늘 여러번 놀라넵

이런 묶음 배송을못하는것을 부르는 용어 언더패칭!!

언더패칭

래스트 에이피아이는 언더페칭의 문제가있다.
원하는건 4묶음인데 한묶음씩밖에못가져온다.
내가원하는것보다 아래로(언더로) 밖에 못가져온다.
고로, 래스트 에이피아이는 언더페칭한다.

오버패칭

래스트에이피아이는 원하는것만 콕 가져오는게아니라 전체를 다 가져와야함
내가 원하는건 이름만인데 래스트는 프로필전체를 가져온돠..
내가원하는것보다 오바해서 가져온다.
고로, 래스트 에이피아이는 오버페칭 한당

정규표현식

핸드폰 010-1234-5678
3,4,4,-를 검증해야할때 for 문과, if문을 사용해서 하다보면 너무 까다로워진다.
그때 사용하게 되는것이 정규표현식!!
정규표현식을 사용하게되면 쉽고 깔끔하게 표현하게 된당!!
회원가입시에 많이 사용하게된다!!!(이메일검증, 비밀번호검증)

  /apple/.test("apple")
// 조건          입력값
// (슬래쉬안에서 조건작성)  
// 반환은 boolean


/\w@a.com/.test("a@a.com")
// 역슬래쉬는 w에 뭐가들어가도 괜찮다는것!!


정규표현식은 똑같은조건을 찾는게 아니라 그조건이 포함되어있으면 트루를 반환한다.
그걸 위해 처음에는^ 끝에는$ 를 넣으면 전체를 똑같이 검증하게됨

/^\w@a.com$/.test("m71kr@a.com")
==>false

그럼 아이디가 열글자면 \w\w\w\w.... 열개 해야하나???
/^\w+a@a.com$/.test("sfdsfdfsa@a.com")
true 
	1개거나이상일때는 + 를 붙혀주고
    
 /^\w?a@a.com$/.test("sfdsfdfsa@a.com")
  없거나 한개일때 ? 를붙힘
 /^\w*a@a.com$/.test("sfdsfdfsa@a.com")
true
  
  없거나 한개거나 1개이상일때는 * 를 붙힘!

 
고로, 이메일을 검증하는 정규표현식은
 /^\w+a@\w+.\w+$/.test("sfdsfdfsa@naver.com")
 앗! 근데 . 을 검증 안했돠.. (그냥. 은 뭐든지 다 들어갈수있다는 뜻!!)
 
 /^\w+a@\w+\.\w+$/.test("sfdsfdfsa@naver.com")
 .의 원래의미를 탈피하기 위해서 앞에 \ 를 붙혀주면 끝!!!

전화번호 검증

/^\d+-1234-5678$/.test("010-1234-5678")
\d+ 숫자 아무거나 얼마든지!

/^\d{3}-1234-5678$/.test("010-1234-5678")
\d{3} 숫자 아무거나 3개!!

/^\d{3}-\d{3,4}-\d{4}/.test("010-1234-5678")
\d{3,4} 숫자 아무거나 3개나 4개!!

문자만 들어오게하는법은??
[a-zA-Z]

띄어쓰기를 체크하는 부분!
\s

글로벌 스테이츠(리덕스 redux)

global-state

state lifting 과는 다른개념
state lifting은 자식 1,2에 부모가 프롭스로 스테이츠를 내려준것!

근데 해당 스테이츠를 여기저기서 많이 쓰게된다면 굉장히 복잡해진다.
중간컴포넌트는 프롭스를 쓰지도 않고 밑으로 보내주기 바쁨 즉 프롭스를 뚫고 내려간다(=프롭스 드릴링/비효율적임)

모든 컴포넌트에서 공통적으로 공유할 수 있는 스테이트가 있었으면 좋겠돠....윗단계프롭스없이ㅜㅜ
그런 스테이트가 있다!! 바로 클로벌 스테이트

리덕스가 설치되어있으면 됨
리덕스에 저장되어있는 스테이트를 마음껏 사용하는것임!!!
흐얿... 리덕스 나왔다아아아악!!!!!!!!! 집쥬우우웅!!!!

리액트==리덕스 라고 오해할정도로 리액트에 딸려오는 칭구라는 인식이 많았다.
근데 굉장히 어렵다..
원래는 리덕스에 모든걸 다아아아 담아놨었돠(쿼리,뮤테이션,스테이트)

리덕스를 좀더 개선했으면 해서 나온게 mobX(모브엑스)->swr-> 최근 트렌드는
api(패치보드,패치프로덕트)용 묶음!!
프롭스드릴링 방지용 일반 글로벌스테이트 묶음!!

api 묶음
rest- reat-query
gql- apollo-client

일반 글로벌스테이트
context-api(리액트자체에있음 useContext())
--> 유즈컨텍스트의 단점을 보완하기위한 라이브러리 등장! recoil!!!(리코일도 컨텍스트 에이피아이로 만들어짐)

fetchpolicy 정책 때문에 api 와 글로번스테이츠 로 묶음을 나누게됨!

api 묶음
const {data}=useQuery
해서 데이터가 들어올때는 usequery 값이 아폴로캐쉬스테이트 에 저장이됨!!
그러고 그 데이터가 data 로 들어오게 되는것임!!!!
그러고서 스테이트가 바뀌니까 다시 리랜더가 되는것!

패치프로덕트를 다른 컴포넌트에서 또 할 수있음
하지만 이미 아폴로 캐쉬 스테이트에 패치프로덕트가 저장되어있을텐데...???

패치요청있을때 캐쉬스테이트를 먼저 확인하고 올라단다.
fetchPolicy 의 cache-first 라고 부름

그러기 싫으면 fetchPolicy 의 network-only 라는 기능을 쓸 수도 있음
그냥 캐쉬스테이트 보지말고 바로 네트워크에서 가져와라~
기본설정은 캐쉬 펄스트임!

이렇게 이미 기능이 잘 분리되어있는데 일반스테이트랑 분리 왜않헤? 너희끼리 서랍속에 들어가랍! 깔끔쓰~

아폴로 캐쉬스테이트에 프롭스드릴링도 넣을 수도 있는데
그냥 api용으로 쓰는게 국룰쓰~

일반 글로벌스테이트(recoil-state)
https://recoiljs.org/ko/
리코일도 독스가 따로있다.

글로벌스테이트 저장소를 스토어 라고 보통 부른다.

위와같은 프롭스 드롤링을 방지하고자 글로벌 스테이트!! 리코일 사용하댜!!

두 오큐리코일 스테이트를 연결해주기위해서 '아톰' 이 필요하다!!
아톰은 만들면 모든곳에서 다 사용가능!!

이즈에딧스테이트를 공유해서 기본 이즈에딧이 서로 똑같이 바뀌게 됨!
모든컴포넌트가 스테이트를 다 공유할 거다 할때는
앱닷 제이에스를 RecoilRoot 로 감싸줘야함!!