const {} , const[] => Destructuring

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

const {name , age, school} = child
이렇게 한줄로 바꿔줄수있다.

아래 사진처럼 useQuery를 사용하여 return으로 객체를 받아올때 객체 안에 data와 loading이 들어온다.

const aaa = useQuery(FETCH_BOARDS)
aaa.data
aaa.loading
이렇게 바꿔줄 수 있으나 Docs에서 나온 방법대로 사용하는게 개발자들과의 약속이기때문에 원래 방식대로 {}를 사용한다.

배열도 마찬가지이다.

child1에는 철수, child2에는 영희, child3에는 훈이가 들어가게 된다. 이거를 한번에

const [child1, child2, child3] = classmates
이렇게 한줄로 바꿔서 사용할 수 있다.

아래 사진처럼 useState를 사용할 때 useState("") 값의 return 값이 [state,setState] 배열이 들어오게되는데 bbb[0] = counter , bbb[1] = setCounter가 들어오게된다.
그래서 bbb1 이라고 써주면 counter가 20으로 바뀌게된다.

실습 객체

실습 useQuery, 함수의 객체

실습 배열
만약에 사용하지 않을거면 ,를 이용해서 자리를 잡아줘야 순서가 밀려서 담기지 않는다.

실습 useState

객체에서 데이터를 삭제 => Rest_Parameter

변수를 지우고싶을때 delete를 쓰면 되는데 원본을 건드려야하기 때문에 비효율적인 방법이다.

원본을 건드리지 않고 삭제하기 위해서는

const {money,hobby, ...rest} = child
...rest로 나머지를 따로 담아주고 money,hobby를 구조분해할당 후에
rest
{name:"철수", age:8, school:"다람쥐초등학교"}
사용하고 싶을때는 rest.name , rest.age, rest.school하면 원하는것들을 사용할 수 있다.

HOC는 클래스용 => Custom-Hooks

useQuery(), useRouter(), useMutation, useState(), useEffect() 모두 함수형이고
Custom-Hooks의 경우도 함수이지만 우리가 만드는 함수라고 생각하면된다.

function useAAA(){}
use를 쓰지않고 그냥 만든 함수와는 별 다른 차이는 없으나 use의 경우 안에서 useState와 같은 함수들을 사용하게되면 use를 써주면 된다. 붙이지 않아도 상관없으나 docs에서는 써주는것을 권장한다.
function bbb(){}

refetch 는 쉽지만 별로 => Cache-Modify

사용방법은 vscode를 통해 주석으로 설명하겠다.