Destructuring (구조분해할당)
객체의 구조분해할당
-
객체의 구조분해할당에서 순서는 중요하지 않다.
-
대신,
이름(키 값)이 중요하다.
배열의 구조분해할당
-
배열의 구조분해할당에는 이름은 상관없지만, 배열이기 때문에
순서가 중요하다. -
사용하지 않는 변수는
,를 사용해서 빈값을 입력해줘야 순서에 맞게 적용시킬 수 있다.
useQuery의 원리
function useQuery(qqq) {
// qqq API 요청하기
return {
data: {fetchBoards: { writer: "철수" } },
refetch: () => {
console.log("리페치가 실행됩니다!")
},
}
}
const { data, refetch } = useQuery("FETCH_BOARD")
data.fetchBoards.writer // '철수'
refetch() // 리페치가 실행됩니다!
const aaa = useQuery("FETCH_BOARD")
aaa.data.fetchBoards.writer // '철수'
aaa.refetch() // 리페치가 실행됩니다!useState의 원리
function useState(qqq) {
const myState = qqq
const mySetState = () => {
console.log("state를 변경합니다!!")
}
return [myState, mySetState]
}
const [count, setCount] = useState(0)
count // 0
setCount() // state를 변경합니다!!
const zzz = useState(0)
zzz[0] // 0
zzz[1](5) // state를 변경합니다!!Rest-Parameter
객체에서 필요한 데이터를 삭제하고 싶은 경우
위의 예시처럼 delete를 하면 원본 데이터에도 영향을 끼치게 되므로 가급적 사용하지 않는것이 좋다.
child에서 money, hobby를 제외하고 나머지 데이터를 rest라는 이름으로 구조분해할당 해준다.
이때, rest를 rest parameter라 한다. (rest의 이름은 변경 가능)
Custom-Hooks
Custom-Hooks는 보통 use로 시작하는 함수이다.
그냥 함수는 use가 없다.
로그인 검증 Custom-Hooks
src > components > commons > hooks 폴더를 만들어주고,
custom-hooks을 사용하여 useAuth.tsx파일을 만들어준다.
로그인 검증을 하고 싶은 페이지에서 useAuth()를 호출해서 사용할 수 있다.
global state를 사용해서 로그인 검증 실패시, 바로 이전 페이지로 이동하도록 router를 설정줄 수 있다.
search 검색 기능 Custom-Hooks
나만의 useQuery 만들기
이런식으로 useQuery를 custom hooks로 분리해서 사용하면 기존에 사용하던 BoardList.container 파일이 필요없어 진다.
BoardList.container 파일과 BoardList.presenter 파일을 합쳐 BoardList.index파일로 만들어 주고, index파일에서 custom hooks으로 분리한 useQuery를 import해서 사용해준다.
index라는 한 파일안에서 작성할 수 있기 때문에, 그동안 presenter에서 props로 받아왔던 data 등을 props로 받을 필요없이 그냥 사용할 수 있다.
버튼부분에서 import한 onClickMoveToPage 함수에 경로를 인자로 넣어 사용해줄 수 있다.
Generic 타입
.prettierrc 파일
프리티어 실행명령 설정
any, unknown, generic은 어떤 타입을 넣어도 상관없다는 공통점이 있다.
- any : 결과 예측 불가능
- unknown : 사용하기 전에 조건으로 알려주어야 함
- generic : 들어가는 순간 해당 타입으로 설정됨 -> 타입의 결과를 예측할 수 있다.
generic 타입 사용 예제
generic타입은 useQuery, useState등을 만들어 제공할때 사용한다.
withAuth 파일 역시 generic 타입을 사용해서 props의 타입을 지정해준다.
