props data prev?, 정규표현식, 글로벌 스테이트, context API

8/2

이번주는 로그인과 권한분기가 진행되는 아주 중요한 주간이다.
이를 다루기 위해 밑바탕이 되는 글로벌 스테이트를 오늘 배웠다.
여기에 ContextAPI라는 것을 활용할 수도 있고, Redux 또는, ApolloClient의 ApolloCacheState를 활용할 수도 있다고 했다.
(여기서는 ContextAPI를 배우고, 사용합니다.)
함수와 props, data, prev 그리고, 정규표현식도 함께 배웠다.

프로그래머스

답1

답2

 

props data prev?, 정규표현식, 글로벌 스테이트, context API

~~(aaa) = 매게변수

원래는

오늘 전까지 배울 때는 props를 적었는데, 원래는 props가 아닌 내 맘대로 이름을 정해주면 된다

props는 관례일 뿐!

이름 정하기

“나”는 “몇번째"입니다.

이렇게 적으면?

철수는 무엇일까요?
영희는 무엇일까요?
훈이는 무엇일까요?

prev

prev가 아닌 내가 정하는 것!

 

map

~~어린이로 했었는데 트루로 한것

map으로 하면 철수, 영희, 훈이가 나온다

숫자 증가

prev가 아닌 아무거나

아무거나 써도 됨

정규표현식

홈페이지 확인 방법
@가 있으면 트루, 없으면 펄스

잘쓰고 있는지 확인하는 것

/ 슬래시가 양옆에 있으면 정규표현식 이구나!

둘다 똑같으니 통과!

다른 이메일은 통과가 안됨

 

이스케이프w = \w

\w는 문자 1개를 의미한다.
하지만 이메일은 문자가 하나가 아니라서
/w+ 이렇게 적는다

. 점이 있는건 '모든' 이라는 뜻

/\w+@\w+\.\w+/

 

 방법이 많다.

이렇게 방법은 많다

핸드폰 번호

중간에 3자리, 4자리가 있으니까 \d{3,4}를 적는다

w = 숫자    d = 문자

날짜

이렇게 하면 2021.07.01만 트루가 되니까

핸드폰 번호랑 비슷한데 다른게 있다

날짜를 이렇게 써도 맞다고 한다
중간에 문자나 이상하게 쓴게 있으면 펄스가 나와야 하므로
시작점과 끝점을 알려줘야한다

첫 부분에는 ^로 시작해서 마지막부분은 $를 사용한다

 

글로벌 스테이트

ContextAPI

트루면 수정하기, 펄스면 등록하기

지운다

이렇게

한방에 제공하겠다! 뭐를?

모든 컴포넌트에서 순간이동으로 받을 수 있다

넘겨줌

나머지 props를 지운다

< 여기서 만들고 > 여기서 사용하겠다! 이뜻

여기서 이어줘야 하니까

이렇게 적는다

isEdit까지 적으면

순간이동 완성

3개를 묶음

onChange, onClick 가능

안거치고 뽑을수 있음

isEdit

주석처리함 = 상관없으니까

있으면 게시판 수정
없으면 게시판 등록

 

useQuery페이지

기본값

정상적으로 작동

BoardsNew에서도 사용중

isEdit를 가지고 오게 되어있음

아래꺼 내려주지 않으면 위에 상자꺼를 가져감(트루있는거)

받은 데이터로 또 보낼수 있다.