[220418]_TIL

오늘의 목표

1. const{}와 const[]원리 : 구조분해할당
2. 객체에서 데이터를 삭제해보기 rest parameter
3. HOC는 클래스용 Custom Hooks
4. refetch말고 Cache-Modify

1. 구조분해할당
   === 비구조화할당

const child = {
name : "철수",
age:13,
school: "다람쥐초등학교",
}

const name = child.name
const age = child.age
const school = child.school

비구조화할당

const { name, age, school } = child

const { data, loading} = useQuery(FETCH_BOARDS)

		// 함수 실행후 return 값이 객체

===
const aaa = useQuery(FETCH_BOARDS)
aaa.data
aaa.loading

const classmates = ["철수", "영희", "훈이"]
const child1 = classmates[0]
// 철수
const child2 = classmates[1]
// 영희
const child3 = classmates[2]
// 훈이

const [child, child2, child3] = classmates
구조분해 할당

const [state, setState ] =useState("")
// 함수이고 리턴 값이 배열임
== const [counter, setCounter]
구조분해할당을 안하면

const bbb = useState("")
bbb[0] = counter
bbb[1] = setCounter
bbb1 ===
counter === 20
근데 이렇게 안씀 이렇게 쓰면 그냥 미친놈 소리 다이렉트로 들음

useQuery 윈리

function useQuery(aaa){
// aaa는 초기값

return {
    data: {
        fetchBoard : {
            writer: "철수",
            title: "제목입니다.",
            contents: "내용입니다."
        }
    },
    loading: "로딩중"
}

}
undefined

useQuery("FETCH_BOARD")
{data: {…}, loading: '로딩중'}
data: {fetchBoard: {…}}
loading: "로딩중"
[[Prototype]]: Object

const {data, loading} = useQuery("FETCH_BOARD")

배열 구조분해할당 원리

const classmates = ["철수", "영희", "훈이"]
undefined
const child1 = classmates[0]
undefined
child1
'철수'
const [] = classmates
undefined
const [, child2, child3] = classmates
undefined

이를 통해 useState원리 알기

function useState(aaa){
const myState = aaa // 초기값으로 사용
const setMyState = (bbb) => {
console.log(state를 ${bbb}로 바꿔줄게!!)
}

return [myState, setMyState]

}
undefined
const [count, setCount] = useState(10)
undefined
setCount(20)
state를 20로 바꿔줄게!!

객체구조분해할당은 키값이 중요함
순서는 중요하지 않음 ex) age, school이든 school, age든 상관이 없음

배열구조분해할당은 이름은 중요하지 않음 aaa든 state든 상관이 없음
그러나 순서가 중요하기 때문에 할당하지 않더라도 빈칸, 를 입력해줘야됨

2. REST 파라미터

객체에서 특정 키값을 지우고 싶을 때

delete 로 하면 되는데...

const child = {
name : "철수",
age :8,
school :"다람쥐초등학교",
money: 2000,
hobby: '수영'
}

delete child.money
delete child.hobby
를하면 money와 hobby가 지워지나 예상치 못한 에러가 발생함
원본이 지워지기 때문에

그렇기에 원본을 건드리지 않고 삭제를 하는 방법이 필요하다.

그럴 때 쓰는게 REST 파라미터

const{money, hobby, ...rest} = child

=== money, hobby 따로 구조분해 할당하고
...rest는 위에를 제외한 나머지를 구조분해할당해줘

rest
{name: "철수", age:8, school: "다람쥐초등학교"}

원본은 건드리지 않고 객체를 삭제하는 방법
굳이 rest라고 안해도 됨

3. custom hooks

hook이란?
use로 시작하는 것들을 말함

이것들은

function useAaa(){
}
//use 있음
같은 것

즉 걍 함수다

fucntion bbb(){
}
//use 없음

여기서 차이는 useAaa()같은 함수는 내부에 useState, useEffect 같은 것들을 사용하는 함수라고 해서 구분해주는 것이고 이를 custom hooks라고 함
useAaa()에서 use를 붙히나 안붙히나 상관없는데 붙혀주는 것이 좋음

※ 괄호가 두개일때 async는 await와 가장 가까운 괄호에다가 붙혀준다

4. apollo cache 수정

무한스크롤 페이지 할 때 좋음
복잡한데 왜 하는지?

규모가 커지면 cache를 수정하면 query가 안날라가니까