첫 취업 후 typescript와 zustand를 사용하는 커머스 웹앱 프로젝트를 맡아서 하다보니 데이터를 다룰 때 다양한 오류를 마주하는 것 같다.
이제 3주차 인데 남은 일정을 생각하면 급히 처리 해야겠다는 생각으로 작업만 하였었는데, 너무 부담갖지말고 되는 부분까지 최대한 하라고 하셔서 나중을 생각해서라도 하나씩 알고 지나가는 것이 좋을 것 같다 생각하게 되었다.
코드를 내 깃헙에 올릴 수 없으므로 코드를 약간 바꿔서 블로그에라도 꼼꼼히 기록 해보려 한다.
타입 에러!!!
const Detail = () => {
//...
const getAddress = useAddressStore(state => state.getAddress)
const address = useAddressStore(state => state.address)
useEffect(() => {
getAddress(...)
},[])
//...
return (
//...
<div>{address.addressName}</div>
//...
)
}/* zustand store */
interface AddressType {
addressName: string;
//...
}
interface State {
address: AddressType | {};
//...
}
export const useAddressStore = create<State>((set) => ({
address: {},
getAddress: async () => {
//axios 데이터 가져오기
set({address:{...res.data}})
}
}))대략 위와같은 형식으로 작성을 하였다.
useEffect안에서 데이터를 가져오는 getAddress()를 실행하고 밖에서 사용 할 address를 꺼내서 사용하려 하였다.
콘솔을 찍어보니 처음에는 빈값{}으로, 이후 useEffect가 초기 실행되면서 데이터를 가져오는 것을 볼 수 있었는데, 처음에 객체가 빈값이다보니 address.addressName부분이 문제가 있다고 줄이 그어졌다.
그래서 address: AddressType | {} 이렇게 빈객체도 지정해주었던 것이었다.
그리고 이러한 오류가 났었다...
Property 'addressName' does not exist on type '{} | AddressType'.
Type '{addressName?.string | undefined; ....}'
Type 'undefined' is not assignable to type 'string
address의 타입을 받아올 데이터들 타입을 담아둔 interface 말고도 {} 빈객체를 해주었는데도 안되는건가??
받아올 데이터 타입들에 전부 string | undefined 처럼 undefined를 써주라는건가????
빈 객체일 때에는 얼리리턴을 시키는 방식으로 데이터가 있을때만 addressName을 넣어주도록 해도 해결되지 않았다....
어떤 블로그를 보니 객체를 임시로 any주고 복사해서 쓰라는 형식이 있었는데, 왠지.. 다른 방법이 있을 것 같아서 하나씩 고쳐보기로 했다.
결과는...?
두가지 수정을 거쳐 해결 하였다.
const Detail = () => {
//...
const getAddress = useAddressStore(state => state.getAddress)
const address = useAddressStore(state => state.address)
useEffect(() => {
getAddress(...)
},[])
//...
return (
//...
<div>{address.addressName}</div>
//...
)
}/* zustand store */
interface AddressType {
addressName: string;
//...
}
interface State {
address: AddressType;
//... 수정1 : 빈객체 타입 없애주기
}
export const useAddressStore = create<State>((set) => ({
address: {
addressName: "",
// ...수정2: 초기값 지정
},
getAddress: async () => {
//axios 데이터 가져오기
set({address:{...res.data}})
}
}))1. address 타입!
오류들을 검색도 해보고 다시 읽어보다가 아!! 혹시..? 싶어서 store state 가져오는 address에 마우스를 대어보니 오류에서 보던 '{} | AddressType 이놈을 발견하였다.
당장 {}를 없애고 AddressType만 사용하였더니 에러가 줄었다.
그렇지만 또 다른 에러!
Type '{}' is missing the following properties from type 'AddressType': AddressName, ..... and 6 more.
2. 타입 지정과 똑같이 초기값도!
속성이 없다..?!
왠지 type은 지정 해 줬는데 초기값은 빈값이라 그런 것 같다는 느낌이 들었다.
address:{addressName:"", ....} 속성을 채워주니 오류 해결!!
🧐 느낀 점
아직까지 개념이 잡히지 않은 상태에서 프로젝트를 들어가다보니 기초적인 부분에서도 오류가 생기는 것 같아서 부끄럽다.
데이터가 많은데 이걸 언제 다 처리하지? 이런 생각으로 객체니까 {} 이렇게만 해도 초기값이 되지않을까? 생각했었는데 typescript를 쓰면서 정확히 타입을 정하다 보니 이러한 오류를 많이 마주하는 것 같다.
하나하나 타입 지정해주는 것 보다 좀 더 실용적으로 타입 지정을 할 수 있는 방법, 어느 부분에 타입을 지정해줘야하는지부터 공부해야 겠다는 생각이 들었다.
공부하며 정리&기록하는 ._. 씅로그
