Day 21

간단한 CRUD, 텍스트뿐만 아니라 이미지파일, 검색부분정도가 이제 기본기.

++ 이미지 수정

삼항연산자를 이용해서 없으면 기존 업로드된 이미지를 띄우고 없으면 새로 업로드된 이미지를 보여주는 것이다.
기존에 있던 사진은 -props.defaultFileUrl
수정하려고 변경한사진:props.fielUrl
따라서 수정하려고 변경한사진(fielUrl)이 사전에 등록했었던 사진(props.defaultFileUrl)보다 먼저나와야함. 그렇지 않으면 등록했던사진만 나오게됨. 여기서 ||의 순서가 중요함, 그거에 맞춰서 뒤의 삼항연산자도 알맞게 써야한다.
삼항연산자또한 사용에 익숙해져야함.. 글을한번 쓰면서 배워보자

이제 로그인 상태에 따라서 나눌 수 있고 결제 기능 또한 더 배울 부분이 많다, 글로벌 스테이트(공통된 스테이트를 한군데서 모은다음 꺼내다 쓰기), 로그인 원한받기, 폼 라이브러리에 대해서 이번주에 배울 것..

props data prev, Graphql- variables

props의 실체

함수를 실행할때
함수를 만들고 함수를 선언해서 불러왔다.

여기서 카운트는 123을 주고 aaa.count하면 123이나옴

여기서 aaa는 그냥 받는것을 의미하고
aaa자리에 {count:123}이라는게 들어간다.
이후 aaa.(안의)coun를 찾으면 123이 나오게 되는것.

이게 ..? React에서 썼던 컨테이너/프리젠터, props..?

아까 봤던 함수에서 봤듯이 aaa든 props든 사실 그 안으로 아까 정의했던 함수가 들어가게 되는것이다
그게 진짠지 실습으로 알아보자

실제로 props대신 이름을 막 바꿔도 된다.

그럼 함수로 바꿔보자

이런식으로 함수인것처럼 취급해도 제대로 나눠진다.

컴포넌트 취급과 함수형으로 해도 결론적으로 같아지는 것이다.

el의 실체

map 쓸때 el을 써왔다

하나씩 넣는걸 여러개 넣을때는 map과 el => 화살표함수를 사용해서
똑같은 걸 세번 실행시켜주는 것과 같다

이것도 사실 => 화살표함수를 썼다 뿐이지 함수인것이다.
여기서 철수, 0이 인자, argument
el, index가 매개변수로 인자를 받는 것이다.

그럼 사실상 el과 index라고 안쓰고 asdf, qwer이라고 써도 잘 연결만 시켜주면 됐던 것이다.

이쯤되면 사실상 알 수 있다
그냥 함수, 매개변수, 인자를 받아왔던것

el을 한번 다시 보자

export default function MapElPage() {
  ["철수", "영희", "훈이"].map((el, index) => {
    console.log("el", el);
    console.log("index", index);
    return ""
  });

  return <> </>;
}

!!map에선 return을 항상 써옴
아니면 forEach를 쓰면 된다.

이렇게쓰면 0번엔 철수, 1번에 영희, 2번에 훈이가 나올 것이다
("index"나 "el"을 쓰면 뭐가 뭔지 맞게 출력되서 알기 쉽다.

2. function 써보기

  ["철수", "영희", "훈이"].forEach(function (el, index) {
    console.log("el", el);
    console.log("index", index);
  });

큰 함수가 인자로 함수 안에 들어가있는 것 같다.
(이걸 콜백함수라고 부르는데 나중에 더 알아보자)

그러면 이상한 이름으로 바꿔도 되는건가?

  ["철수", "영희", "훈이"].map((asdf, qwer) => {
    console.log("asdf", asdf);
    console.log("qwer", qwer);
    return ""
  });

잘 된다. 사실 그래서 정해놓은 함수의 기능같은게 아니고 그냥 매개변수로 받고 있었다는 것이다.

prev의 실체

그렇다면 prev도..?
간단하게 카운트가 증가되는 함수를 만들어봤다.

import { useState } from "react";

export default function StatePrevPage() {
  const [count, setCount] = useState(0);

  function onClickCount() {
    setCount((prev) => prev + 1);
  }

  return (
    <>
      <div>현재 카운트 : {count}</div>
      <button onClick={onClickCount}>카운트 증가!!</button>
    </>
  );
}

사실 setCount안에도 매개변수로 인자를 받고 있었다는것, 콜백함수가 들어간 것이다.

화살표 함수를 function을 넣은 함수로 바꾸면

  function onClickCount() {
    setCount(function (prev) {
      return prev + 1;
    });
    

이런식으로 나온다
그럼 아무렇게나 써도 되나요??

   function onClickCount() {
    setCount((qweqwe) => qweqwe + 1);
  }

된다.

근데 왜 아무렇게나 써도 이렇게 정해져서 썼냐면... 그냥 관례적으로 맞춰서 쓴것이다. 또한 이 개념을 알아야 다음에 나올 개념을 알 수 있다.
++ 이런 작동방식또한 알아두어야한다.

graphql- variables 실체

grapshql 또한 마찬가지다

이렇게 String을 지정하는 타입부분은 무조건 똑같아야하지만 writer 부분은 asdf로 바뀌어도 똑같이 작동한다.

이렇게 createBoard도 이름을 바꿔도된다.

여기서 언더페칭과 오버페칭의 개념 또한 등장한다.

언더페칭
rest는 원하는 데이터를 가져오기 위해서 여러번 해야하지만 graphql 에서는 안에서 두 가지 요청을 한가지 createBoard 안에서 할 수 있는 모습을 볼 수 있다. 이는 rest-API의 언더페칭(부족하게 페칭하는것)의 문제를 해결 한것이 graphql임

오버페칭
오버페칭또한 알 수 있는데
graphql 을 _id 를 써서 원하는거만 받아올 수 있지만 restAPI는 writer, title, contents등 모든 정보를 다 받아와야한다. 이게 오버페칭

정규표현식

이메일을 검증할때 우리는 여태까지 include를 사용해서 @가 있는지 . 이 있는지 검증했다
근데 aaaa.@aa 이렇게 쓰면 이메일이 아닌데도 불구하고 검증이 완료된다.
그래서 필요한게 -> 정규표현식
/슬래시 안에/.test("입력값")
쓴다

비밀번호 6~15자리 검증하기
/^[a-zA-Z0-9]{6,15}/.test("asdpwsk123") 날짜 검증하기 /^\d{4}\.\d{1,2}\.\d{1,2}/.test("2000.1.1")
전화번호 검증하기
/^\d{3}-\d{3,4}-\d{3,4}/.test("010-1111-2222")
이메일 검증하기
/^\w+@\w+.\w+$/.test("123@123.com") 전화번호 검증하기 /^\d{3}-\d{3,4}-\d{4}$/.test("010-1234-5678")

\w 문자열 하나 제한
\w+ 문자열 하나 이상
\d{숫자수 제한}
\d{3, 4} 3자리 또는 4자리
.은 그대로 .으로 쓰면 모두를 뜻하는 .이된다(git add .)처럼 그래서 .이라고 쓴다

그런데 이대로만 하면 어떤 부분이든 조건만 맞으면 맞다고 검증시켜주기 때문에
시작점과 끝점을 설정해줘야한다.
/^\d{3}-\d{3,4}-\d{4}$/.test("010-1234-5678")
여기서 ^이 시작점, $이 끝점이다.

글로벌 스테이트

컴포넌트 밖에 있는 state를 사용할때는 props를 사용한다. 하지만 컴포넌트가 다중으로 되어있다면 props를 여러번 사용해야될텐데.. 좀 문제가 있지 않을까?

그래서 개선해서 나온게 MobX -> SWR -> 최신 버전의 React-Query 이다.

react-query는 rest api 에서 사용하는 것이다.

우리는 이미 apollo를 이용해서 써왔다. fetchBoards나 fetchBoard를 바로 가져와서 직접 넣어주는게 아니라 내부에 있는 state에 담아주고 그 다음 알맞은 데이터를 넣어주는 역할이다.

context api

이런식으로 index에서 createContext를 import, 초기값은 (null)로 한다.
이후 함수를 선언해서 값을 설정해준다.

이후 리턴 아래 .provider를 넣어서 연결(바인딩)을 시켜준다.

그러고 나면 다른 presenter나 container에서 따로 만들 필요 없이 import를 해온 다음에 index에서 선언했던 함수를 가져오면 된다. 끝