[TIL] 5. 구조분해할당(=비구조화할당) / Refresh문제점 / ApolloState 직접 수정

 

 

Today Goals

1. 아하 이제 const{}, const[] 원리를 알겠어! - Destructuring
2. 객체에서 데이터를 삭제해보자 - Rest- parameter
3. HOC는 원래 클래스용임 - custom-hooks ⇒ 함수형 용 (hoc는 클래용이든 함수용이든 사용 가능.. )
4. refresh 쉽지만 별로예요 - writeQuery / readOnly

 

---

오늘의 정리

 

비구조화할당 Destructuring

1. 비구조화할당은 ES6에 추가된 JS 표현식으로 배열이나 객체에서 특정 데이터를 변수로 추출해 사용 할 수 있게 해줍니다!
2. useState(), useQuery() 또한 이런 형식으로 이루어져있다. 중요한 포인트가 있었어요, 객체 구조분해할당의 경우 객체 내의 key 이름이 중요해 같은 이름으로 사용해야 한다는 것, 배열의 경우 위치, 즉 순서가 중요했습니다. 그 예시로 우리가 useQuery() 에서 data를 가져올때 이름을 마음대로 바꿔줄 수 없어 data:우리가 주고 싶은 이름의 형태로 사용했죠.
3. 비구조화할당의 가장 큰 장점이 있었습니다! 여러줄의 코드를 한줄로 간단히 줄여줄 수 있었어요! 이를 활용하면 우리의 코드를 리펙토링하는데 있어 유용하겠죠!

REST파라미터에 대해서도 알아봤죠!

1. 객체에서 특정 값을 지우고 싶을때, (delete를 사용하게 되면 원본의 값도 지우게 되어 좋지 않다) →(원본을 건들지 않기 위해 rest파라미터를 스프레드 연산자와 함께 사용한다) {지우려는 값1, 지우려는 값2, …rest} 를 사용하면 값1과 값2를 제외한 새로운 객체가 rest에 담기게 됐습니다! (여기서 rest는 관례상 이름일뿐 다른 이름으로 변경이 가능하다)

 

마음대로 변경한 Hook: customHook

(Hook이란 함수형 컴포넌트에서 사용되는 state 기술들의 모음)

(useEffect, useRef 등 use로 시작하는 hook들을 직접 만들어 봤습니다.)

 

withAuth :

기존의 클래스형컴포넌트에서 사용되는 withAuth이 hoc(higher order component)였습니다. 해당 컴포넌트를 실행하기 전 먼저 실행 시켜 우리의 조건에 부합하는지 검증해주는 역할이였어요. 이 부분을 함수형컴포넌트에서 적용시킬 수 있었습니다. 이 를 위해 useAuth를 만들었죠! 과정은 동일했습 니다! 해당 컴포넌트 실행 전, useAuth컴포넌트가 먼저 실행된 후 해당 컴포넌트가 실행됐습니다!(isLoading으로 확인해봤죠!)

 

usemoveToPage :

페이지 이동을 관리할 수 있는 Hook도 만들어봤습니다! usemoveToPage라는 customHook을 만들어 필요한 곳에서 import 시켜 사용했습니다! 기존의 페이지 이동 기능 구현과 큰 차이는 없었습니다! 하지만, 해당 기능을 Hooks로 따로 관리하여 코드가 간결해지고 유동적 사용이 가능해졌고, 유지보수가 용이해졌죠!

 

refetch를 조금 더 효율적으로 하는 방법

1. 기존에 우리는 refetchQueries를 사용했음.
2. refetchQueries 사용했을 때 단점 : 게시물/상품 목록과 같은 많은 데이터를 담은 부분에 수정이나 삭제가 발생하여 refetch를 요청했을때 수정/삭제가 발생한 부분만이 아닌 전체 데이터를 refetch하기 때문에 불필요한 네트워크 비용을 소모한다는 단점이 있었습니다!
3. refetchQueries 사용했을 때 단점 해결책 ⇒ ApolloSate 직접 수정! : 우리는 이를 Apollo의 데이터가 저장되는 cacheState를 직접 수정하여 좀 더 효율적으로 만들어 줄 수 있었죠!
4. **update(cache,{data}){}**를 통해 기존 데이터가 저장되어있는 cache와 쿼리 실행 이후 받은 데이터가 담겨있는 data를 합쳐줬죠! cache.modify({})를 사용해 합쳐주었던것 기억나시나요!? 이 안에는 fields가 있고 그안에 우리가 요청하는 쿼리의 이름이 key로 담겨있었습니다! 이 부분을 우리가 직접 새로운 데이터와 기존 데이터를 함께 수정해 최신화 시켜 보여주게 해주었습니다!(어떤 작업(등록/삭제 등)이냐에 따라 filter()를 사용해주었죠? 여기서 el에 대한 값을 읽어주기 위해 readField를 사용한것 기억하셔야 합니다!) 이것을 네트워크 탭을 함께 열어놓고 보면, 추가적인 refetch api 요청이 백엔드로 가지 않는 것을 확인할 수 있었죠!

어제 오늘 2일간의 수업은 단지 기능을 만드는 것을 넘어서, 얼마나 좋은 서비스를 만드는가에 관한 내용이 포함되어 있습니다. 또한, 여러분들이 취업하게 되는 실무 환경에서는 이미 이러한 문화가 갖추어져있고 사용 되고 있을 것입니다. 중고마켓을 만드시는 동안, 자유게시판처럼 단지 기능만 돌아가게 만드는 것이 아닌, 어떻게 하면 확장성, 유지보수성이 좋은 서비스를 만들지 생각하며 만들어 보시기 바랍니다.(면접시 중요하게 보는 요소입니다.)