오늘은 원리를 알아볼 예정!
로그인이나 결제도 알아보자.
로그인 등 보안문제 해결 기능 추가
여러 케이스 최적화 방향
글로벌 스테이트 Recoil을 사용해 props없이 사용해보자
로그인은 방법이 사람맏 다 다른데 옛날 방식과 최근 방식의 차이 때문이다.
그래서 로그인의 역사를 알아보고 우리는 뭘 사용해야할지 알아보자.
next.js렌더링의 원리를 알아야 기능을 사용하는데 어려움이 있어서 원리를 배워보자.(마이페이지에 접속할 때 로그인 했는지 확인하고 들어가기 등에 필요)
state 등 react-hook을 자동으로 만들어주는 라이브러리가 있다.
이번시간에는 rest와 grapql 차이를 더 알아보고, 글로벌 스테이트를 알고 사용해볼 예정이다.
props의 실체
함수의 실행은 () 로 하며 객체를 매개변수로 줄 수도 있다.
컴포넌트도 props를 매개변수로 받는다.
내부에서는 Presenter({conut: 123})으로 동작하기 때문에 props라고 안쓰고 aaa라고 적어도 된다!!
getProfile("훈이", 2)
const getProfile = (aaa,bbb) => {
console.log(${aaa}는 ${bbb}입니다)
}
["철수", "용히", "훈이"].map((aaa,bbb) => console.log(${aaa}는 ${bbb}입니다))
이런식으로 함수안에 들어가는 함수를 콜백함수라고 한다.
함수의 매개변수는 이름을 마음대로 바꿀 수 있다.
prev의 실체
state
prev역시 매개변수이므로 이름을 바꿀 수 있다.
setTimeout(() => {})
여기서 () => {} 도 콜백함수이다.
graphql variables의 실체
$도 이름을 바꿀 수 있다.
variables의 type을 왜 쓸까
요청할 때 여러개의 api를 묶음요청이 가능하다.
이때 중복될 수 있기때문에 타입을 선언해줌.(타입선언시 이름은 별로 중요하지 않다.)
실제로 묶어서 많이 사용한다.
그래프ql의 장점
1. 원하는 것만 골라서 받기
new! 2. 묶어서 한방에 요청하기
rest api의 문제점
1. 언더페칭 under-Fetching : 원하는api는 3개인데 1개씩밖에 못 받아온다.
2. 오버페칭 over-Fetching : 게시글 목록에 보일 제목과 작성자만 필요한데 무조건 모든 정보를 다 가져와야한다.
1,2를 개선한게 graphql이다.
사실 graphql도 rest-api다?
graphql의 원리
rest-api를 변형한게 graphql이다.
rest를 사용하던 개발자들은
get방식에는 body가 없다. (최신버전은 있음)
게시글 /boards
상품등록 /product
get, post
등 무수히 많은 end point가 생긴다.
오버페칭, 언더페칭 문제가 있다. 등 여러 문제점을 해결하기 위해 고민한 결과 graphql이 만들어졌다.
endpoint가 하나이다.
원하는 값을 받아서 문자열로 바꾼 뒤 value값에 담자.
query라는 키를 붙여서 넘기자. (객체처럼)
무조건 항상 post방식이다.
즉 graphql은 endpoint가 하나인 rest-api의 POST방식이다.
graphql은 타입에러가 아닌 이상 항상 200이다.
여러개를 가져오는데 뭐가 성공이고, 뭐가 실패인지 모르기때문애 전체를 무조건 성공으로 보내준다.
각각을 따로따로 참조해야한다.
포스트맨으로 grapql 요청하기 실습할 예정
여기의 query는 graphql의 query가 아니고 이름이다.
map과 forEach
굳이 따지면 forEach가 map보다 빠르다.
for는 실무에서 잘 쓰이지 않는다.
globla state 이해
각각 컨테이너와 presenter가 있고, state가 각각 있다고 하자.
프로필이 많을 때는 이들을 모두 포함한 부모에 state를 주고 각 컴포넌트에 props를 주어야한다. 이걸 props 드릴링이라고 하는데 이게 너무 복잡하다.
그래서 글로벌 스테이트를 만들어 props 없이 필요한 여러페이지에서 import만 하면 사용할 수 있게 할 수 있다.
글로벌 스테이트 종류가 Redux, Mobx, SWR,...,React-Query, Apollo-Client, Recoil 등등 많이 나오기 시작했다.
기존 글로벌 스테이트는 Redux가 많이 쓰였는데 점점 어렵고 비효율적이라는 문제점이 있었다. React-Query는 fetchPolicy가 내장된 REST-API용
Apollo-Client는 fetchpolicy가 내장된 graphql-API용
이렇게 나오다보니 redux는 안쓰게 되었다.
그러다보니 redux에서는 업데이트해서 redux-toolkit을 요즘 많이 쓴다.
하지만 위에 2개는 백앤드에서 받아온 정보를 사용할 때 쓴다.
fetchPolicy(페치정책) 이란?
재사용하고 불러오기 편하도록 글로벌스테이트에서 먼저 검사를 해서 있다면 가져다 쓰고, 없다면 백엔드에 요청을 한다. 이렇게 글로벌 스테이트를 먼저 검증하는 과정을 fetchPolicy(페치정책)이라고 한다. 페치정책의 기본값은 cache-first이다. (임시저장 = 캐시)
기본값은 캐시퍼스트이지만 글로벌 스테이트에서 가져오기 싫다면fetchPolicy : "network-only"라고 입력해서 서버에서 새로 가져올 수도 있다.**
fetchPolicy의 기능
“cache-first” ::default:: → 캐시에 있는지 먼저 확인**“network-only” → 캐시에 있든 없든 무조건 백엔드에 요청**
redux-toolkit은 자체적으로 만든 state도, 백앤드에서 받아오는 쿼리도 저장할 수 있다. 이것만 사용하거나 아니면.
상대적으로 가벼워 미니리덕스라 불리는 Recoil 라이브러리와 백앤드 정보를 저장하고 가져오는 React-Query나 Apollo-Client를 같이 쓰기도 한다.
실습
next.js는 페이지가 이동하면 app.tsx가 다시 실행이 되기때문에 받아온다
변수가 새로 만들어진다는 말인데 ApolloSetting에서 아폴로 클라이언트에서 cache가 글로벌 스테이트라는 말임.
결국 아폴러 세팅 밖으로 빼서 변수에 넣고 캐시에 넣어준다.
Recoil 사용
리코일
리코일을 활용해 isEdit state를 글로벌스테잍에 저장하고 불러오기
자체적으로 만든 state는 Recoil이라는 라이브러리를 사용해 저장할 수 있다.
리덕스툴킷은 너무 크기때문에 미니리덕스라 불리는 Recoil을 React-Query나 Apollo-Client와 함께 사용한다.
설치
Recoil을 사용하기 위해서는 설치를 해줘야한다.
npm : npm install recoil
yarn : yarn add recoil
세팅
Recoil은 app.tsx파일에서 세팅하면 된다.
//app.tsx 파일
import {
RecoilRoot,
atom,
selector,
useRecoilState,
useRecoilValue,
} from 'recoil';
function App() {
return (
<RecoilRoot>
//RecoilRoot로 모든 컴포넌트를 묶어준다.
<Component />
</RecoilRoot>
);
}사용
Recoil은 Atom으로 state의 일부를 보여준다.
Atom 파일은 따로 빼는게 필수는 아니지만 파일을 분리하게 되면 export를 해주면 된다.
// Atom
const textState = atom({
key: 'textState', // state의 이름
default: '', //초기값
});textState의 이름은 바꿀 수 있다.
이렇게만 설정해주면 나머지 사용법은 useState와 비슷하다.
사용할 함수 안에 이렇게 선언해준다.
const [text, setText] = useRecoilState(textState);
import는 useRecoilState와 textState 둘 다 해준다.
함수가 실행되면, textState를 참조하는 모든 컴포넌트에서 재렌더가 일어난다.
오늘은 이제껏 그냥 사용만 해왔던 함수들의 원리를 이해하는 시간이었다.
좀 더 graphql과 state에 대한 이해도가 올라간 것 같다.
