25일차 / Destructuring, Rest-Parameter, Custom-Hooks, Cache-Modify

6주차 커리큘럼

• Destructuring : const{} , const [] 원리
• Generic
• Web-Editor
• lamport : 결제 API
• Map : 지도 연동

Destructuring

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

const{}, const [] 원리

세 줄을 써야할 것을 한 줄로 쓰게 하는 것.
객체 안에 들어있는 것을 빼서 변수로 만들겠다.
세 줄을 한 줄로 줄였다. (약속)

리턴 값이 있다는 것은 함수의 자리에 리턴이 들어간다는 것.
객체 안에 data와 loading의 값이 들어있는 것.

Doc처럼 쓰는 것이 관례이기 때문에,
aaa.data, aaa.loading처럼 사용해도 되지만 객체 안에 있는 것을 분해해서 할당해서 사용을 했다.

child 1에 철수, child 2에 영희, child 3에 훈이가 들어간다.
이것을 한번에 줄여보자고 나온 것이 구조분해 할당.

이 함수를 실행하고나서 받아오는 return 값이 배열이라는 것.
이 자리가 구조분해할당을 하지 않는다면
const bbb = useState("")
bbb에 counter, setCounter가 들어가게 되는데 bbb[0] = counter, bbb[1] = setCounter 가 된다.

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


const name = profile.name


name
'철수'

const { age, school } = profile


age
8
school
'다람쥐초등학교'


function useQuery(aaa) {

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


useQuery("FETCH BOARD")
{data: {…}, loading: '로딩중!'}

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


data
{fetchBoard: {…}}

data.fetchBoard.title
'제목입니다'

data.fetchBoard.contents
'내용입니다'

loading
'로딩중!'

useQuery의 리턴값이 객체였기 때문에 중괄호로 써주었던 거구나.

const [, child2, child3] = classmastes

child2
'영희'
child3
'훈이'

철수를 할당하고 싶지 않더라도 콤마로 위치는 구분해주어야한다.

useState는 대괄호로 써주고 useQuery는 중괄호로 쓴다.

배열과 객체의 차이?

객체는 이름이 중요하고 순서는 중요하지 않다!

배열은 순서가 굉장히 중요하고 이름은 중요하지 않다! ( 내 마음대로 지을 수 있음 )
순서를 지키기 위해 빈 콤마를 쓰게 되는 것

배열로 리턴하는 이유?
객체로 할당하면 이름을 마음대로 바꿔줄 수 없으니 그런 게 아닐까 추측

Rest-Parameter

객체에서 데이터 삭제

원본을 지우지 않고 삭제를 하려면 어떻게 할 것인가?
그럴 때 쓰는 게 REST 파라미터

rest에는 나머지가 들어가있다.

원본을 건들지 않고 age 삭제하기

rest라는 이름은 관례일 뿐 이름을 바꿔도 된다.

Custom-Hooks

HOC는 원래 클래스용?

함수들의 이름을 바꿔주면 Custom-Hook이 된다.

이런 함수와 무슨 차이점이 있나요?

함수 안에 use로 시작하는 애들을 사용하는 함수 이름을 use~~로 짓는다.
그리고 이것들을 Custom Hook이라고 부른다.

함수 안에 use가 없다고 하면 그냥 일반 function이라고 한다.

앞에 use를 꼭 붙여야 할 필요는 없지만 Docs에 보면 use를 반드시 붙여달라는 말이 써있다.
use를 붙이지 않았다고 해서 실행이 되지 않는 것은 아니다. (권장사항)

커스텀 훅을 활용한 권한 분기 로직

클래스형은 HOC 형태로 나오므로 알아두어야 커스텀 훅으로 바꿀 수 있기 때문에 알아두어야 함!

페이지 이동 함수 빼서 커스텀 훅으로 만들기 가능

Cache-Modify

refetch는 쉽지만 ...

중괄호를 사용해줌으로써 순서와 상관없이 키 값으로 데이터를 받아올 수 있게 한다.

shorthand property: 키와 밸류 이름이 같으면 생략가능

객체 구조분해 할당은 순서가 중요하지 않다! => 이름이 중요함

글로벌 스테이트에 담겨있는 fetchBoard, fetchProduct 등등의 필드 중 어떤 필드를 수정할래?
= cache.modify

prev 안에는 10개의 객체 [{},{},{}...]

새로운 글 + 기존 글 = 11개의 글이 만들어짐
return 하면 글로벌 스테이트에 있는 캐시 스테이트가 변경됨

fetchBoards를 불러오는 값을 가진 곳에 변경된 값으로 리프레시가 된다.

delete의 경우
원하는 아이디만 삭제하게 하면 된다.
deletedId만 지우고 나머지만 리턴
filter를 사용!

el_id를 바로 불러올 수 없다.
제공해주는 readField라는 기능으로 id 읽어오기

무한스크롤 페이지에서 많이 사용됨

리페치랑 다른 점?

리페치는 api가 두번 날아감!
등록할 때와, 리페치 할 때, 데이터를 받아오기 위해 한번 더 쿼리를 날리게 됨.
직접 캐시를 수정하게 되면 1번만 날리게 됨.
작은 서비스에서는 의미가 없지만 큰 서비스로 가게 되면 비용이 증가하므로 이것을 줄이고자 이런 방식들을 채택하게 된다.