2023. 3. 22

Junghan Lee·2023년 3월 22일
0

TIL Diary

목록 보기
22/52

index

filter
refetchQueries
library폴더의 utils 파일 관리
컴포넌트 재사용성
수정한 값만 바꿔주기
defaultValue & state
변경된 부분만 mutation 날려주기



filter

이름 그대로 배열의 원소를 필터링 해주는 메서드

filter는 조건에 따라 배열의 길이보다 적게 나올수도 있지만 map은 배열의 길이만큼 값이 나온다.

refetchQueries

기존의 데이터가 변경되었을 때 다시 받아주기 위해 사용

위는 삭제 mutation, 페이지를 다시 로드하려면?(새로고침 x)

참고할 공식 문서 링크
https://www.apollographql.com/docs/react/data/mutations/
https://www.apollographql.com/blog/apollo-client/caching/when-to-use-refetch-queries/

refetchQueries에서의 variables

참고. index를 key로 줘도 괜찮은 상황
정적인 데이터(계산되지 않고 변경되지 않는 데이터), map의 모든 데이터가 id가 없을 경우, 데이터가 재정렬되거나 필터링되지 않는 경우
index&key에 대한 설명 링크
https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318

library 폴더의 utils 파일 관리

Section06에서 폴더를 분리했던 것(container-presenter)
폴더와 파일의 이름은 회사마다 다름
공통적으로 쓰이는 함수를 한 곳에 저장하여 함께 사용하는 방법이 있다.
함수를 여러번 만들지 않고 한번 만들고 import로 가져오는 것
어디에 만든다?

💡 tip

import해서 함수 사용하기

위 코드의 결과물

컴포넌트 재사용성

페이지를 컴포넌트로 나누어 주었던 이유?
수정하기! 왜 또 만들고있니? 등록하기를 재사용 해바

컴포넌트 만들기

컴포넌트를 import => 각각 등록페이지, 수정페이지 만들기

불러오면? 등록하기 페이지와 같다.
다르게 해주려면?
props & 삼항연산자 사용하기
각 페이지 isEdit 수정하기 페이지일 경우 : true , 등록하기 false

이후 isEdit의 boolean 타입에 따라 등록과 수정이 나오게 props , 삼항연산자 사용

수정한 값만 바꿔주기

기존값 유지하지 않고 수정하면 모든 부분 업데이트. 보완필요

default value에 기존 데이터 데려오는 과정에서 fetch필요
수정에만 적용해야 하므로 fetch 페이지 컴포넌트에서 하고 data를 props로 넘겨주기

defaultValue & state
defaultValue를 줘도 수정하기 누르면 수정하지 않은 부분에는 빈 값이 들어감
state의 초깃값 때문
defaultValue는 실제 state가 아닌 input의 속성이라 state에 저장되지 않음(보이는 것과 달리)

해결방법? defaultValue를 state의 초깃값으로 넣기(비효율적), 뮤테이션할때 변경된 부분만 보내주기(효율적)

변경된 부분만 mutation을 날려주는 코드

myVariables 빈 객체 선언했다. 꼭 들어가야 하는 number 미리 넣어두고 조건문을 이용해 state가 빈 값이 아닐 경우에만 객체에 key와 value 추가.
그렇게 완성된 객체 -> variables에 넣어 뮤테이션

profile
Strive for greatness

0개의 댓글