24일차

graphQL useQuery를 사용하면 화면이 그려지면 화면 안에 자동으로 요청하여 가져온다.
axios는 요청하면 결과값을 result에 넣어서 받아와서 화면이 그려지면 데이터를 그려준다.

graphQL방식이 편리할 수 있으나 상황에 따라서 axios 방식이 필요한 경우가 있다.
mutation은 사용이 가능하지만 이외의 hook들은 함수 안에서 사용할 수 없으므로 이슈가 생길 수 있다. 원하는 곳에서 실행하고 원하는 곳에 담아오고 싶을 경우에는 useApolloCilient를 사용한다.

useLazyQuery는 useMutation처럼 원할 때 실행하면 데이터를 불러오게끔 해줄 수 있다.. useQuery는 페이지가 시작되자마자 데이터를 불러오기 시작한다...

폼라이브러리 리액트 훅 폼
비제어 컴포넌트
입력을 받을 때마다 렌더링이 일어나는 제어 컴포넌트와는 다르게 스테이트와 상관없이 인풋만 바뀌고 필요할 때 데이터를 등록해주는 방식이다.

보통은 비제어 컴포넌트를 사용하지만 카드번호 등 안전성이 필요한 것들은 속도가 조금 느리더라고 제어 컴포넌트를 사용하는 것이 좋다.

그리고 react-hoor-form, hookform/resolvers를 설치하다가 만난 오류...

Error: Package subpath './yup/dist/yup' is not defined by "exports" in /Users/no-eunjeong/codecamp-04/class/node_modules/@hookform/resolvers/package.json

<츄라이 츄라이 디스>
경로: ../@hookfomr/resolvers/package.json

...
"exports": {
...
"./yup/dist/yup": {
      "browser": "./yup/dist/yup.js",
      "umd": "./yup/dist/yup.js",
      "import": "./yup/dist/yup.js",
      "require": "./yup/dist/yup.js"
    }
  }

경로를 강제로 지정해주었더니 node_module 삭제 후 재설치 시 경로 지정을 다시 해주지 않으면 같은 오류가 발생하였다. 근본적인 문제를 해결하기 위하여 찾아보았더니 node 버전의 문제일 수 있다는 말을 들었다.

node 버전 관리를 위해 brew를 통해 nvm install을 해주고 nvm install (버전)을 실행해준다.

보통 기본 14버전을 추천하지만 m1칩은 16버전 이하의 버전은 설치가 불가능하기때문에 16버전을 깔아주었고 잘 실행되었다. yup resolver의 웹팩(WEBPACK)혹은 subPath 문제 발생 시 참고하시길 바란다.