1.const{},const[]의 원리
Destructuring
2.type
Generic
3.웹 에디터
Web-Editor
4.결제 API
lamport
5.지도 연동
Map
1.Destructuring 2.객체에서 데이터 삭제(Rest-Parameter) 3.HOC(Custom-Hooks) 4.refetch(Cache-Modify)
구조분해할당(비구조화할당)
객체
const child={
name: "철수"
age:13,
school: "다람쥐초등학교"
}라는 객체가 있다할 때 값을 가져올 경우
const name = child.name
const age = child.age
const school = child.school이
const {name, age, school} = child
로 바꿔서 가져올 수 있다.
배열
배열의 경우를 보면
onst classmates = ["철수", "영희", "훈이"]
라는 배열 이 있을때 이 값들을 할당해 주려면
const child1 = classmates[0]
const child2 = classmates[1]
const child3 = classmates[2]같은식이 된다. 이 식을 구조분해할당을 거치면
const [child1, child2, child3] = classmates 가 된다.
useState의 경우
const[state, setState] = useState("")
const bbb = useState("")
bbb[0] = state
bbb[1] = setState가 되며 bbb[1](변경할값)를 통해 bbb[0]인 state를 변경 할 수 있다.
다만 잘 사용되진 않는다.
하지만 여기서 알 수 있는것이 있다.
보통 useState() 혹은 useRecoilState()를 사용 할 때 보면
const [state] = useState()/useRecoilState()
const [,setState] = useState()/useRecoilState()
이런식으로 state 부분을 비우게 될 경우 ,를 추가하여 뒤쪽에 setState를 작성했다.
아마 Global State인 recoil에서 자주 사용할 것이다.
이는 배열의 특성 때문이며 만약[setState] = use 에 ,가 없을 경우 [,setState] 가 되어 state처럼 동작 되기 때문에 비어있는 곳은 ,를 적어주어 사용한다.
REST 파라미터
객체의 값을 지우고 싶을 때 원본을 건드리지 않고, 지우고 싶을 때 사용하는 기법으로
const child = {
name: "철수"
age: 8,
school: "다람쥐초등학교",
money: 2000,
hobby: "수영"위와 같은 객체가 있다고 생각할 때 money 와 hobby를 삭제하고 싶다고 하자 그럴 경우
const {money, hobby, ...rest} = child 처럼 표시하면
...rest에는 name, age, school이 들어간다.
rest
>{name:'철수', age:8, school:'다람쥐초등학교'}우리는 여기서 원하는 결과값으로 rest.name, rest.age, rest.school을 뽑아서 사용 할 수 있다.
rest는 단순 관례로 아래처럼 다른 이름 으로 바꿔도 무방하다.
`const {money, hobby, ...deletedMoneyHobby} = child`
console.log(deletedMoneyHobby) // {name:'철수', age:8, school:'다람쥐초등학교'}
구조분해할당을 응용하여 지우고싶은 [key, value]를 분리하고 남은걸 사용한다 생각하면 된다.
Custom Hooks
Hooks(useState, useQuery, useMutation, useRouter .....)는 react에서 다양한 기능을 담고 있는 함수들이다.
Custom Hooks도 마찬가지로 기능을 담은 함수를 뜻하지만 Hooks들과의 차이점은 우리가 직접만든(Custom)한 Hooks라 생각하면 된다.
사용하는 경우는 주로 function에서 이미 useState, useEffect등 다른 Hooks들을 사용하고 있는 경우에 상위 function을 use... 이라고 이름을 붙여 사용한다.
use를 안 붙인다고 실행이 안되는 것은 아니다.
하지만 이는 Hooks들의 프로젝트에서 실행순서같은 부분에 차이에 미세한 영향을 주기에 사용하는 권장사항이라고 한다.
// Custom Hooks를 사용할경우
// 안쪽에 Hooks 들이 있을 경우
function useAaa(){
useState()
useEffetc()
}
// 그냥 사용할 경우
// 안쪽에 Hooks 들이 없을 경우
function aaa(){
bbb(ccc){
return ccc
}
}refetch(Cache-Modify)
refetch는 주로 query를 할 때 data를 추가로 가져오거나 새로고침 위해 실행한다.
하지만 이는 서버에 data를 한번 더 요청 하기에 규모가 작을 경우엔 크게 문제가 생기지 않지만,
대규모의 작업이 refetch될 경우에는 서버에 걸리는 부하가 커진다.
이 부하를 줄이며 새로운 파일을 불러오기 위해 Cache를 Modify 하게 되는데 그 과정을 Cache-Modify라 한다.
const onClickSubmit = async () => {
await createBoard({
variables: {
createBoardInput: {
writer: "영희",
password: "1234",
title: "제목입니다~",
contents: "내용입니다@@@",
},
},
});
};라는 부분이 있다 해보자, createBoardInput = :{writer, password, title, contents} 는
새로운 위 4가지가 담겨져있는 데이터를 생성하는 mutation이며 해당글의 리스트를 가져오려면 refetch를 사용 하지 않고 어떻게 해야할까?.
const onClickSubmit = async () => {
await createBoard({
variables: {
createBoardInput: {
writer: "영희",
password: "1234",
title: "제목입니다~",
contents: "내용입니다@@@",
},
},
update(cache, { data }) {
// data.createBoard
cache.modify({
fields: {
fetchBoards: (prev) => {
return [data.createBoard, ...prev]; // 10개(기존), 1개(새로추가한)
},
},
});
},
});
};위 처럼 기존에 refetchQuery가 들어갈 부분에 update(cache, {data}){} 를 추가해줘
{data}의 cache를 update 하겠다고 입력을 해준다.
그리고 cache.modify({fields: {} }) 를 추가하여 캐시를 수정함을 알려주며
fields를 통해 그 범위를 정해주게 된다.
해당 코드의 fields는 fetchBoards: 라는 글들의 정보를 보여주는 Query이며
return은 기존 데이터인 data.createBoard에 ,...prev(새로 추가된 mutation data)가 된다.
prev는 "이전" 을 뜻하지만 update 이전에 createBoard를 통해 추가시켜준 글이 이전의 데이터가 되면서 이렇게 되는 것이다.
