TIL-2/11

Regex 정규표현식

^ : 처음
$ : 마지막
\ : 이스케이프 문자의 의미를 지우고 스트링과같이 취급시켜준다
w : 문자
. : 모든
+ : 1개, 1개이상
? : 없거나 있거나 판별
d : 숫자
{n} : n개~
[a-z][A-Z][0-9] 이런식으로 이어서 대소문자 포함도 가능!! (물론 숫자도.)
/(검사기준)/.test("(검사하고싶은거)")

ex) 핸드폰번호 유효성 검증
/^\d{3}-\d{4}-\d{4}$/.test("010-1234-1234") => true

// 핸드폰 번호 010 고정으로 검증
/^010-\d{4}-\d{4}$/.test("011-1234-1234") => false

// 유효 숫자 범위를 적용시킨버전 ([A-Z], [a-z] 문자도 가능.)
/^010-[0-9]+-\d{4}$/.test("010-1234-1234") => true

https://hamait.tistory.com/342 이 블로그에 더 자세하게 나와있다 참고하면 좋을듯!

global state

부모가 가지고 있는 State 데이터를최하위에 있는 자식 컴포넌트에 props 로 넘겨주려고 하려면,
중간 중간에 있는 모든 자식 컴포넌트에게 넘겨줘야 한다.(매우 귀찮은 과정에 헷갈릴 가능성도 있다.)

Context는, 이러한 과정 없이가장 최상위에서 모든 State 들을 관리하며,
어떠한 컴포넌트든Context 를 이용해 해당되는 State 를 가져올 수 있다!!

중간 중간마다 있는 자식 컴포넌트들에게도 props 를 전달하지 않고
바로 최하위 컴포넌트로 State 를 전달한다.

Context 를 사용하기 위해선 기본적인 설정이 필요!
먼저, 최상위 컴포넌트app.tsx에서 모든 컴포넌트로 전달해줄 State 를 담아주는 Context 를 설정해보자!

Context 데이터를 사용할 변수에 createContext 함수의 인자값으로
관리할 State 들을객체 형태로 담아주고,
State 를 설정했으니State 값을 변경할 수 있는 set 함수도 함께 설정할 수 있다.

여기까지 Context State 값의 타입을 설정했는데, 아직 State 값이 만들어진 것은 아니다.
useState를 이용해 설정한 State 값들을 만들어준다.

방금 생성한 State 값들이 바로 위에서 설정했었던
Context 의 State 객체에 담겨져 하위 컴포넌트로 출력되는 State 가 된다.

중요!! Context 에 설정된 키 이름과 State 로 생성한 키 이름을
동일하게 설정해주어야한다!!

자, 이제 그럼 생성한 State 들을

하위 컴포넌트로 뿌려주기 위한 작업을 추가해줍니다.

app.tsx 가 return 하는 부분에서 전체 페이지들을 Context 를 감싸준다.

이때, Context 의 State 값을 제공한다는 의미로Provider기능을 사용할 수 있고,
value 값으로전체 페이지로 전달할 State값들을 넣어준다.
이제부터, value 객체에 들어 있는 모든 State 값들은 모든 컴포넌트에서 가져올 수 있는 전역 State 값을 가지게 된다.
컴포넌트에서 Context 안에 담겨있는 State 값을 가져와서,
Context API 를 사용하려고 하는 페이지에서
다음과 같이 불러올 수 있다.

컴포넌트 안에서는useContext기능을 이용해서
최상위에 설정된Context 의 State 값을 비구조화 할당으로 가져올 수 있다.
이렇게 해서 가져온 name State 값을 화면에 출력해보면,
Context 에 설정된 name 값이 잘 출력되는 걸 확인할 수 있다!!!

query를 요청할 때, Apollo 에서는 기본적인 fetch 정책으로 Apollo-cache를 먼저 체크하고 없다면 컴포넌트 안의 요청을 보내는 것이다.

물론 요청 순서의 설정을 바꿔줄 수도 있다.