Day-29
이전에 내가 사용하던 <props, data, prev> 들의 실체에 대해서 알게 되었다.
다소 다소 충격적이지 않을 수 없었습니다.
그 충격의 현장 살펴 보겠습니다.
1. <props,data,prev>의 실체 !!?
2. /정규 표현식 /의 기본
3. 글로벌 스테이트
1. <props,data,prev>의 실체 !!?
1-1 Props의 실체
기존에 늘 하던 방식은 컴포넌트에서 다른 컴포넌트로 넘기려면
props를 통해 하는 방식이였다.
props는 사실은 관례였을 뿐 어떤 이름이어도 상관 없었다.
1-2 data의 실체
.map으로 data를 뿌려줄때 또한 사실은 위치가 중요한 것이지 이름은 중요하지 않았다..
1-1 prev 의 실체
prev를 처음 배울때 count 버튼을 만들어서 누를 때마다 +1이 되도록 하는 기능 인줄 알았었는데 알고보니 이prev도 사실은 매게변수(parameter) 이기 떄문에 이름이 바껴도 무방했다..
2. /정규 표현식 /기초
2-1 이메일
정규 표현식:어떠한 data가 내가 원하는 형식에 맞는지 아닌지 검증 하는것
기존에 data를 검증 하는 법이라 하면
.inclides를 통해서 하는 방법이 먼저 생각이 난다.
하지만 .inclides 는 정확하게 이게 형식이 맞는지 알기 가 힘들다 그래서 사용하는 방법이 정규 표현식 
/ / 안에 해당하는 패턴을 입력해준다.
사용자가 입력한 데이터를 패턴과 맞는지 검사한다.
왼쪽이 패턴/오른쪽이 사용자가 입력한 데이터
▶︎문제점
를 사용 하게되면 다른 이메일이 들어 왔을때는 false가 반환이 된다....
필요한 페턴을 제와하고 나머지를 문자열로 인식하게 해준다.
w는 그냥 알파벳 w이고 이스케이프(Escape) \w 를 해준다.
하나만 하면 한 글자만 말해주는것이고 1개 이상 글자이면 + 를 붙여주면된다.
정규 표현식에서 . 은 (모든~) 을 의미 하기 때문에 문자 . 으로 Escape 해준다.
더 엄격한 예외 처리는 다음에..
2-1 전화번호,날짜
-전화번호
위에 \w\가 문자를 뜻 하는 것이라면 \d\ 는 숫자를 의미한다.
중간 번호가 3자리인 경우를 대비해서 3자리 또는 4자리
-날짜
숫자이기 때문에 전화번호처럼 \d\ 를 사용해 주면다.
▶︎문제점
앞에서 부터 찾기 때문에 뒤에 이렇게 숫자가 여러개 들어와도 true로 반환된다.
▷방법
^(정규식 표현의 시작)
$(정규식 표현의 끝)
2. 글로벌 스테이트
우리느 props를 이용해서 다른 컴포넌트 끼리 스테이트를 이용 했고 props를 쓰다보면 너무 많은 절차가 필요 했다.
그래서 props를 이용하지 않고 다이렉트로 받아 올 수 있게 공간을 마련 하는 방법을글로벌 스테이트라고 한다.
이용하는 방법은 크게 3가지
1.redux
2.contextAPI
3.apollo cilent
있다.
contextAPI를 이용해 보자!
<기존 props를 이용해 넘겨주는 방법>
<contextAPI 를 이용하는 방법>+
- useContext를 사용해서 전달 하고자하는 정보
(onChange ,onClick, 등등)를 이런식으로 담아준다.
-Provider:모든 자식들에게 제공 하겠다.
value를 사용해서 ..
사용 할 컴포넌트에useContext를 이용해서 다이렉트로 건네준다.
오늘은
한달이 지나갔다 생각보다 너무 빨리 지나가서 아쉽다 아직 익숙치 않은 것들이 많고 알아야 할 것들이 많은데..
턱 없이 부족하다.
여러번 반복해서 익숙해 지는 날이 오겠지만 벨로그나 git을 보면 잘하는 사람들이 너무 많아서 나도 언젠가 저렇게 되겠지 ! 될 수 있을까? 를 반복한다.
