6월 13일 월요일

HSKwon·2022년 6월 13일
0
post-thumbnail

1️⃣ 첫번째 시간
커스텀훅 : use로 시작하는 것들 (useForm, useQuery 등등)

<이번주 커리큘럼>

<오늘 커리큘럼>
1.구조분해 할당에 관한 내용 ( const{}, const[] )
4.규모가 큰 사이트의 경우 mutation과 refetch 두번 해야하기 때문에 좋지 않음. 자동으로 저장되어 있는 global State를 그냥 직접 수정해버리는 편이 나음(추가적인 네트워크 요청 없이 사용가능) (=Cache-Modify)


💡구조분해할당 (=비구조화할당)



=> n개의 변수를 만드려면 n개의 변수가 필요하게됨


=> n줄을 한줄로 줄인 것이 구조분해 할당임

세명을 하려면 세줄을 써야함..... 한줄에 쓸 수는 없을까...?



"const {}" 형식이므로 useQuery의 리턴값이 {}형태의 객체여야함


만약 철수가 필요 없는 값이라면 안쓰면 되지만 그래도 반드시 ","를 찍어줘야 영희의 자리가 지켜짐!!!


useState쓸때 꼭 구조분해할당을 해야하는 건 아님
zzz[0]은 state
zzz[1]은 setState


2️⃣ 두번째 시간

💡 custom-hook...?

use로 시작하는 함수


onClickMoveToPage에 괄호 하나가 더 들어가므로 위쪽에도 화살표함수에서 괄호를 하나 더 넣어줘야함!!(HoC에서 했던것)

⭐️
커스텀훅에서 onClickMove 함수를 만들어놨으므로 기존에 onClick들 다 지우고 커스텀훅을 import해와서 가져다쓰기

3️⃣ 세번째 시간

-graphql-api:apollo-client
-rest-api:react-query

💡 Cache-State


내가 삭제버튼을 누르고 mutation 날린다음에 globalState를 직접 삭제해주기
=> 두번의 네트워크 요청(mutation, refetch)을 한번으로 줄였다.
=> 서비스의 퍼포먼스에 영향을 많이 미친다.
=> 백엔드 서버에 부하를 줄일 수 있다.

profile
공부한 내용이나 관심 있는 정보를 글로 정리하며 익숙하게 만들고자 합니다.

0개의 댓글