220411

함수

함수 실행
getProfile()

함수 선언
function getProfile(aaa){
console.log('Hello World')
}

getProfile({count: 123})

function getProfile(aaa){
  console.log(aaa.count)
}

함수형 컴포넌트는 곧 함수다

props

함수에 들어오는 매개 변수. props가 아니라 다른 이름을 줘도 실행이 된다.

el

매개 변수. 다른 이름으로 변경 가능하다.

prev

setState 에서 사용했던 prev 역시 매개 변수로 원하는 대로 이름을 바꾸어도 작동에는 문제가 없다.

setCount(qwer => qwer+1)

graphql-varialbes

같은 이름을 가진 변수를 찾아 가기 때문에 api를 묶어서 처리하는 것도 가능하다. 이걸 under fetching 이라고 부른다.
mutation 옆에 적어준 createBoard는 하고 싶은 이름을 써주면 되는 부분이기 때문에 다른 걸로 바꿔도 문제가 없다.

Under fetching

rest-API 는 한 번에 하나씩만 가져올 수 있기 때문에 언더 페칭을 쓸 수 없다.
graphql-API는 언더 페칭이 가능하다.

Over fetching

rest-API는 원하지 않는 데이터까지 전부 가져오는 오버 페칭 문제가 있다. graphql 로 원하는 데이터만 선택해서 가져 오는 방법으로 해결할 수 있다.

정규표현식

입력값이 조건에 맞는지 검증할 수 있다.

/apple/.test("apple")
조건 입력값

w : 모든 문자와 숫자를 뜻함
d : 숫자
[a-zA-Z] : 문자
\ : 기존에 갖고 있던 성격을 탈피

• \w 알파벳 w가 아니라 정규표현식의 w 의미로 사용

\s : 공백
^ : 시작
$ : 끝

• 정규표현식은 시작과 끝을 명시해주지 않으면 조건이 입력값 어딘가에 포함되어 있으면 true를 반환하기 때문에 꼭 명시해주어야 한다.

? : 값이 없거나 한 개 일 때
+ : 한 개 이상

• \w+ : 모든 문자 또는 숫자가 한 개 이상 포함

* : 없거나 한 개 이거나 한 개 이상일 때 (모든 경우 포함)
. : 모든 것
{} : 개수 설정

/^\w+@\w+\.\w+$/ 이메일 정규표현식
/^\d{3}-\d{3,4}-\d{4}$/ 휴대폰 번호 정규표현식

props drilling

props가 컴포넌트를 뚫고 내려가는 것

Global state

props drilling 없이 최상위 컴포넌트에 위치한 state 값을 모든 컴포넌트에 전달해 주는 것을 말한다.
초반에는 redux 라이브러리를 설치해서 사용했고 state값 역시 redux에 담아주었다. (reduc -> mobX -> swr)

api 로 받아오는 데이터를 저장하는 global state

• rest-API : react-query
• graphql : apollo-client

props drilling을 제거하기 위한 일반 global state

• context-api
  • useContext, createContext 형태로 사용

global state를 두 개로 쪼갠 이유

fetchPolicy

cache-first 이미 저장된 data가 있으면 백엔드에 새롭게 요청하지 않고 cache-state 에서 꺼내온다. 없으면 백엔드에 요청. 가장 안정적
network-only cache-state로 가지 않고 바로 백엔드로 가는 것
cache-only
cache-and-network

const {data} = useQuery 사용시
apollo-client 의 cache-state(global state) 에 저장된다
처음엔 undefined 로 저장되고 값이 fetch 로 바뀌고 리렌더 된다.

recoil state
api 와 상관 없는 global state 저장소

recoil

context-api 문제점 개선을 위한 라이브러리

yarn add recoil 로 설치해서 사용한다

_app.tsx 의 return 요소들을 <RecoilRoot> 로 감싸준다.

// _app.tsx
 return (
    <RecoilRoot>
      <ApolloProvider client={client}>
        <Global styles={globalStyles} />
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </ApolloProvider>
    </RecoilRoot>
  ); 

store 와 atom

global state 저장소를 store 라고 부른다. atom은 공유되는 변수로 store 안에 atom 넣어준다.

// store > index
import { atom } from "recoil";

export const isEditState = atom({
  key: "isEditState", // key로 다른 데이터들을 구분한다
  default: false, // 초기값
});

useRecoilState 의 변수에 store에 저장한 isEditState를 넣어주면 사용할 수 있다.

const [isEdit, setIsEdit] = useRecoilState(isEditState);

  useEffect(() => {
    setIsEdit(true);
  }, []);