[TIL] 2022년 02월 11 - Global-State

커리큘럼

• 글로벌 스테이트 ? props가 필요없다! => Context-API / Apollo-Client
• 로그인에도 역사가 있다? => AcessToken / RefreshToken
• 잠깐?! 이것 먼저 실행시켜줘 => Clousre / HOC / HOF
• Next.js 렌더링에 이런 원리가 있다 ? => Diffing / Hydration
• 헉?! 폼을 자동으로 만들어준다!? => React-Hook-Form

 

배울 내용

• 함수형 컴포넌트는 진짜 함수다 => Functional-Component
• el,prev,props에는 공통점이 있다 ? => Parameter
• 뭐? Rest와 Grapql에 차이가 또 있다고 ? => Under-Fetchting / Over-Fetching 
• 이건 데이터 검사할때 사용하면 좋을것 같다.
• 글로벌 스테이트?! props가 필요없어 => Context-Api / Apollo-client

우리가 함수를 실행할때 이런식으로 실행한다.

getProfile()

함수를 선언할때는 어떠한가?

getProfile({ count: 123 }) // 함수의 인자 arguments

// () 매개변수 parameter
function getProfile(aaa) {
   console.log(aaa.count) // 123
}

이런식으로 함수안에 매개변수를 넣어 실행할 수 있다.

import Presenter from './Presenter.presenter';

export default function Container() {
return(
   <Presenter count={123}/>
  )
}

// 이거와 같음 
// container
import Presenter from './Presenter.presenter';

export default function Container() {
   return (
      <>
        {Presenter({count:123})}
      </>     
)

export default function Presenter(aaa) {
    return <div>{aaa.count}</div>
}

함수를 선언할때는 첫번재 방법으로 선언해주는 방법과 두번째 Container안에 Presenter를 선언에 그안에 count를 

넣고 그 그 다음 Presenter에게 count를 넣어주면 된다.

// map 사용
// 함수의 인자
( "철수" , 0 )
( "철수" , 0 )
( "철수" , 0 )

// 함수의 매개변수
["철수", "영희", "훈이"].map(el, index) => (
    console.log(`${el}는 ${index}번째 입니다.`);
)

map을 사용할때에도 함수의 메개변수를 이용해서 el과 index를 사용해 map함수를 구현해줄 수 있다.

["철수", "영희", "훈이"].map(asdf, ds) => (
    console.log(`${easdfl}는 ${ds}번째 입니다.`);
)

매개변수안에 값은 고정된 값이 아닌 아무런 값이와도 동일하게 작동된다.

// prev의 실체
setCount(prev => prev + 1)

// 이렇게 해도 상관없다
setCount(asdf => asdf + 1)

state의 prev도 동일하게 아무런 값이 와도 동작한다.

 

Grapql의 실체

// graphql-varables
export const CREATE_BOARD = gql`
  mutation createBoard($writer: String) {
     createBoard(writer: $writer) {
      _id
  }
}
`

createBoard({
    varaibles: {
     writer: wrtier  
}
})

기존 방식의 graphql을 선언해줄때는 위와 같이 mutation을 사용해서 선언해준뒤 createBoard를 이용해 

state를 지정해주면 되는데 이런 방식을 grapql-variables방식이라 한다.

// 왜 2개씩 있어야하나
// rest-API의 undef-fatching 문제를 grapql-ql 이 해결해주었다.
// 백엔드에서 받아오는 api를 다받아온것을 over-fetching 이다.
export const CREATE_BOARD = gql`
// createBoard는 어떤걸로 해도 상관 없다 그냥 그룹이름일뿐
  mutation createBoard($asdf: String) {
    createBoard(writer: $asdf) {
      _id
    }

// restAPI처럼 여러번 요청할 필요없이 하나로 묶어 묶음배송 가능 
// 묶음 배송이 가능하다
   createProduct(writer: $asdf) {
      _id
   }
}
`

grapql은 꼭 한개만 선언해줄 수 있다는 규칙은 없다. 하나의 Board안에서 두개의 grapql을 선언해주어도 

상관없다. 

 

우리가 기존의 rest-api를 이용했다면 under-feching문제가 발생하는데 rest-api는 하나의 함수에서만 선언이 

가능하기 떄문이다. 그러나 grapql에서는 이러한 문제를 해결해주었다.

 

백엔드에서 받아오는 api를 전부다 받아오는 것을 over-fetching이라고 한다.

 

정규표현식

정규 표현식은 문자열을 처리하는 하나의 방법으로 특정한 문자열의 집합을 표현하는 데 사용하는 형식 언어이다.

/\w+@\w+.\w+/.test("aaa@bbb.com")

간단히 테스트하는 방법은 앞에 정규표현식을 넣어준뒤 test를 포함하면 정규표현식 테스트를 거칠 수 있다.

정규표현식에는 여러가지 규칙이 존재하는데 우선 첫마지에 w+가 들어가는데 이것은 문자가 1개인지를 판단해주는

요소이다. 여기서 .을 포함하면 한개 이상의 문자를 뜻한다.

/\w+/.test("aaa@bbb.com")

이런 방식도 true가 나오는 이유는 바로 문자열이 하나라도 있다면 true이기 때문이다.

// 시작점이 가운데 .이 있어 true
/^\w+@\w+.\w+$/.test("aaa@bbb.com")

// .은 모든 이라는 의미를 가짐
/^\w+@\w+.\w+$/.test("aaa@bbbqcom")

// 모든이라는 의미르 가지고 있지만 탈피해줌
/^\w+@\w+\.\w+$/.test("aaa@bbbqcom")

// true
/^\w+@\w+\.\w+$/.test("aaa@bbb.com")


// 몇개를 가지는 지 판단 
/^\w{3}@\w+\.\w+$/.test("aaa@bbb.com")

// 핸드폰 번호
/^\d+/.test("010-1234-5678")

// 시작과 끝 패턴에 맞기에 통과 
/^\d+-\d+-\d+$/.test("010-1234-5678")

// 핸드폰 번호 숫자가 안맞을떄 false
/^\d{3}-\d{4}-\d{4}$/.test("0-1-5")

// 핸드폰 앞자리 생략
/^010-\d{4}-\d{4}$/.test("010-1111-5111")

// 가운데가 3글자 일때
/^010-\d{3,4}-\d{4}$/.test("010-344-5111")

// 0에서 9사이
/^010-[0-9]+-\d{4}$/.test("010-0123123-5111")

// 알파벳
/^010-[A-Z]+-\d{4}$/.test("010-ad-5111")

글로벌 스테이트란? 

우리가 구현할 프로젝트에 로그인 기능이 있다고 가정해보자. 우선 로그인 기능은 여러개에 컴포넌트에 

넣어주어야 다른 페이지에서도 동일한 기능이 작동할수 있다.

 

하지만 이런 기능을 여러개의 컴포넌트에서 여러개 기능을 전부다 넣어서 사용하는 방식은 

매우 비효율 적인데

 

그래서 로그인을 하게된다면 컴포넌트안에 state를 만들고 모든 컴포넌트에서 할당해주는 방식이 

좋은데

 

globalState에서 Redux를 사용 React에서 rest-api를 사용할때 redux를 사용했다.

그 redux역할을 대신 해주는 것이 Apollo-client이다.

 

예전에 redux를 사용할때는 게시글 목록 컴포넌트에서 useQuery를 사용했던것을 

게시글 목록에서 axios를 요청해서 구현하였다. 그리고 axios로 받아온 데이터의 결과를 result에 담아주었다.

 

게시글 목록에 resut에 axios에 담은 데이터를 redux에 보내주어야했다.

그다음 또 redux에서 코드를 작성해주어야 했는데

redux에서 받은 코드를 저장하는 코드가 필요했고 또 redux에서 필요한 것을 불러오는 코드도 필요했다.

 

그래서 결론은 useQuery보다 작성해주어야 할것이 많았다.

// Apollo-client도 global-state이다.
// 여기다 .fetchBoard에 state도 자동으로 만들어짐 
// 그래서 redux도 마찬가지로 자동으로 만들어서 뿌려줌 
const { data } = useQuery(); // apollo

const {} = useQuery()  => rest 

result = axios로 하면 setState에 저장을 못함 



// Apollo-Client를 쓰려먼 graphql써야함 
// resapi에서 Apollo-client를 대체하기위해 mobx, swr, react-query가 나옴 

// reactQuery에서는 안에만 rest를 쓰는거지 방식으 grapql 과 같다.

contextAPI => count를 만들어 각각 똑같이 뿌려주는 방식인데 

우린 앞으로 context-api를 사용할 것이다.

 

global-state에 저장되고 저장한 내용을 받아쓰는 형식인데

getState에서 useQuery를 하더라도 다른 컴포넌트에게도 재요청을 해서 뽑아줄 수 있다.

 

다른 컴포넌트에서 fetchBoard를 할때도 기존의 Redux를 사용했더라면 새로 백엔드로 요청해줘야 했다.

 

그런데 GlobalState에 저장되어있는것을 다른 컴포넌트에서 fetch를 요청해주면 캐시에서는 먼저 

요청한 상태값이 가고있는지를 판단해서 간다.

 

없다면 다시 요청을 해주는데 이것을 apollo-client의 fetch 정책이라 해서 fetch-policy라고 한다.

• "cache-first" - default
• "network-only" - 무조건 요청

axios나 redux를 한다면 비슷하게는 구현할 수 있으나 하나하나 전부다 구현해줘야 하고 state도 직접 만들어야한다.