Functional-component
함수형 컴포넌트 -> JSX 포함
함수 -> JSX 미포함
el, props, prev의 공통점
셋 모두 매개변수(parameter)로 이름에 상관없이 동작하기 때문에 작성자 임의로 선언해도 상관은 없지만 협업, 의사소통 등을 위해 관례로 굳어진 이름을 그대로 사용한다.
Under-Fetching vs Over-Fetching
gql은 위의 그림처럼 하나의 쿼리내에서 다양한 데이터(API)를 요청할 수 있다.
하지만 rest는 API마다 개별적으로 요청을 해야한다.
이를 Under-Fetching라고 부르고 이런 번거로움을 해결한게 gql의 Over-Fetching이다.
정규 표현식
정규 표현식은 슬래쉬('/')를 두개를 사용한 후 그 안에 조건을 작성한다.
검증하려는 데이터가 조건에 부합하면 true를 반환하는 방식이다.
/\w+@\w+.\w+/.test(“aaa@bbb.com”) //true
/^010-\d{3,4}-\d{4}$/.test("010-1234-5678") //true
/^apple$/.test("apple”) //true위에서 사용한 조건은
\w === 글자 한개
\w+ === 글자 두개 이상
\w? === 없거나 한개
\w{3} === 3개
\w{3,4} === 3개 또는 4개
@ === test 문자열에 @가 있는지
\d === 숫자
/\w+/.test(“aaa@bbb.com”) 이렇게만해도 true가 반환되는데 그 이뉴는 테스트 문자열에서 조건에 부합하는 부분이 하나라도 있으면 true를 반환하기 때문
이런 부분을 방지하기위해 시작점 과 끝 점을 설정해 줄 수있다.
시작점은 (^) 를 사용
끝 점은 ($) 를 사용
/^\w+@\w+.\w+$/.test(email)이메일을 검증할 때 점( . ) 도 검증을 해야하는데 정규표현식 조건에서 점( . )은 ‘모든’이라는 기능을 가지기 때문에 그 자리에 어떤 문자가 와도 true로 반환한다.
이런 상황에서는 검증하려는 문자 앞에 역슬래쉬('\') 를 붙여서 이스케이프 기호를 사용해 기존에 있던 기능을 없애고 문자로서 조건에 포함한다.
Grobal-State
RestAPI에서는 Redux 라는 글로벌 스테이트를 사용했다.
Redux->mobX->swr->react-query 순으로 발전했고 react-query는 gql의 apollo-client와 같은 동작을 한다
gql에서는 apollo-client 라는 글로벌 스테이트를 사용한다.
즉, gql을 통해 요청한 데이터를 받아서 apollo-client에 저장함. (Apollo-Cache)
ContextAPI
context-APi는 유저가 직접 선언한 state를 담아놓기 위한 글로벌 스테이트
보통 api와 상관없는 스테이트를 저장
constext는 여러개를 만들 수도 있고 원하는 컴포넌트에만 적용되도록 설정해 줄수도 있다.
전역에서 사용되게 하려면 당연히 app.tsx 에 적용해야함
createContext로 생성, useContext로 사용
Apollo-client 의 고급기능 (apollo-client Fetch Policy)
Apollo-Cache에 담긴 데이터를 2번 컴포넌트에서 불러와 사용하는데 3번에서도 요청하면 api에 요청을 바로 하는게 아니라 글로벌 스테이트인 Cache에서 해당 데이터가 있는지 검색을 하고 없는 경우 api로 요청을 보냄.
