filter
refetchQueries
library폴더의 utils 파일 관리
컴포넌트 재사용성
수정한 값만 바꿔주기
defaultValue & state
변경된 부분만 mutation 날려주기
이름 그대로 배열의 원소를 필터링 해주는 메서드
filter는 조건에 따라 배열의 길이보다 적게 나올수도 있지만 map은 배열의 길이만큼 값이 나온다.
기존의 데이터가 변경되었을 때 다시 받아주기 위해 사용
위는 삭제 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
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에 넣어 뮤테이션