2022_02_11

• 인자 (argument): 함수를 실행할 때 넘기는 값
• 매개변수 (parameter): 함수가 실행될 때 인자로 받은 값 : prev 또한 매개변수이다. (약속된 이름일 뿐이다.)
  
• component 또한 함수이기 때문에 함수로 실행시킬 수 있다.

mutation의 이름 또한 여러 요청을 그룹짓는 이름일 뿐이다.

• rest-api 는 요청하는 수 많큼 요청을 해야하는 문제가 있다(Under Patching)

• rest-api 는 요청을 하면 모든 정보를 다 받아야한다. 즉, 특정 정보만 골라 받을 수 없다.(Over Patching)

• return이 없거나 특정값이 들어간다면 ‘함수' return으로 jsx가 나가면 ‘component’라 한다.

정규표현식

• 기본적으로 / 와 / 사이에 표현식을 넣어 사용한다. ex) /\w+@/.test(”[email protected]”)
  
• \w : 문자 ‘하나'를 의미한다.
• \w+ : 문자 한개 ‘이상' 을 의미한다.

  • 문자열의 갯수를 지정하고 싶다면 {num} 을 사용할 수 있다.

    ex) /^\w{3}@\w{3}.\w{3]$/.test("[email protected]") // true

  • {num1, num2} 는 num1 또는 num2를 의미한다.

• \d : 숫자를 검증한다. +, {} 사용은 위와 같다.
  • 특정 숫자를 검증하고 싶다면 d 대신 숫자를 넣으면 된다.
• ^ : 시작점, $: 끝점
  • 시작점과 끝점을 정하지 않으면 test()안의 모든 값들중 하나라도 일치할 때 true가 반환된다.
• .(dot) : 정규표현식에서 dot은 모든(all)을 의미한다.

  • 문자 .(dot) 을 의미하고 싶다면 ()escape를 사용해야한다.

    /^\w+@\w+.\w+$/.test("aaa@bbb!com") // true
    
    /^\w+@\w+.\w+$/.test("[email protected]") // true
    
    /^\w+@\w+\.\w+$/.test("aaa@bbb!com") // false
    
    /^\w+@\w+\.\w+$/.test("[email protected]") // true

• 를 이용하여 범위를 지정할 수 있다. ex) [a-z], [A-Z], [0-9] , [a-zA-Z0-9]
  

Global State

어떤 컴포넌트를 다수의 컴포넌트에서 공유하고 싶은 상황이 있을 수 있다. 예를 들어 로그인을 할 때 발행된 토큰을 받는 컴포넌트를 토큰이 필요한 모든 컴포넌트에서 만든다면 비효율적인 작업을 해야한다. 하지만 토큰을 받는 컴포넌트 하나를만들고 그것을 모든 필요 컴포넌트에서 사용할 수 있다면 이러한 비효율적인 작업을 줄일 수 있는 것이다.

• 대표적으로 Redux, Apollo-Client가 있다.
• Redux는 Apollo-Client와 다르게 여러반복 작업을 해야하는 불편함이 있었다.
• 개선 : Redux → mobX → swr → react-query
• Apollo-Client는 global state지만 외부 query data를 저장하는데 주로 사용한다.

Apollo-Cache

• useQuery로 요청을 했을 때 data가 저장되는 state 이다.
• 만약 1번 컴포넌트에서 useQuery를 하고 2번 컴포넌트에서 useQuery를 했다면 2번째 query의 data가 apollo-cache에 없을 떄 요청을 보내게된다.
• 위와 같은 정책을 정해둔 fetch-policy가 있으면 이는 사용자가 지정할 수 있다.
  • default는 cache first이며 useQuery(..., {fetchPolicy: “”})를 이용해 정책을 지정할 수 있다.

Context API

• 우리가 사용하는 데이터를 Global State로 사용하기 위해 쓴다. (api와 상관없는 data들)
• 적용시킬 컴포넌트를 지정할 수 있으며 범위 중첩이 가능하다.