server에서 받아오는 Object값의 내부의 value 값들은 null 값이 올수도 있고 undefined가 올수도 있다. 이는 가끔씩 컴파일 에러를 일으킨다.
예를들어
const gotData = {
pocketmon : {
bread: null,
sticker: {
mue: "rare"
},
}
이런 값이 왔을 때 gotData.pocketmon.bread은 null 값이 나오고 큰 문제는 없다.
문제는 mue 값을 가져오려고 gotData.pocketmon.sticker.mue로 가져오려고 헀는데
const gotData = {
pocketmon : {
bread: null,
}
sticker object가 pocketmon내부에 없는 경우이다.
이려면 타입 에러가 뜨면서 undefined에서 property 값을 가져올 수 없다고 에러가 생긴다.
이 문제는 production레벨에서도 에러를 일으키는 크리티컬한 문제이다.
Typescript가 이 문제를 어느정도 해결해주긴 한다.
작업하다보면 미리 해당 object가 null 일수도 있다고 경고를 내준다.
그래서 우리는 그런 에러를 일반적으론
if(gotData.pocketmon.sticker){
console.log(gotData.pocketmon.sticker.mue)
}
요런 식으로 해결해주곤 한다. 깊이가 길어지면 꽤 성가시다. 가끔씩 typescript가 못잡는 경우도 있다. 그리고 default 값을 설정할 수가 없다.
또 다른 방식으로는 gotData?.pocketmon?.sticker?.mue 이런식으로 나타내곤 한다. 이건 중간에 하나라도 없으면 undefined 값을 내놓는다.
default값을 설정하고 싶으면 gotData?.pocketmon?.sticker?.mue || "rare"
이런 식으로 설정하곤 한다. 헌데 이또한 0이나 false값이 나왔을 때 "rare"가 나오므로 우리가 원하는 해결책은 아니다.
그래서 이 문제를 해결하기 위해서 getValue라는 util함수를 사용한다.
getValue: (obj: any | undefined, key: string, defaultValue?: any | undefined): any => {
if (!obj) {
return defaultValue;
}
if (!key) {
return defaultValue;
}
const keys = key.split('.');
let value = obj;
for (let i = 0, len = keys.length; i < len; i += 1) {
const newValue = value[keys[i]];
if (!newValue && typeof newValue !== 'number' && typeof newValue !== 'boolean') {
return defaultValue;
}
value = newValue;
}
return value;
},
이걸 활용하면 object내 undefined, null 문제에 대해 걱정할 필요가 없으며 default값도 반환할 수 있다.
대략 살펴보자면 object값이나 키값을 먼저 살펴보고 defaultValue를 내놓는다.
그리고 나서 key값을 "." 기준 array로 분리한다.
그 이후 이 key값 array로 for 문을 돌면서 값을 확인하며, 만약 중간에 하나라도 값이 없으면 default 값을 반환한다.
그래서 이를 이용하면 util.getValue(gotData, "pocketmon.sticker.mue" , "rare") 는 제대로된 정보를 주던가 아니면 "rare"를 준다. 절대로 type에러를 내는 일은 없다.
이 방식이 단점이 있다면, 앞에 함수가 붙어서 gotData?.pocketmon?.sticker?.mue 보다는 덜 직관적이다. 이를 제외하면 object내 undefined와 null로 인해 생기는 에러처리에는 상당히 도움이 되는 util 함수라고 볼수 있다.