?? ?. || 사용해서 방어코딩대마왕 되기

• 검사 해줘야하는 부분

  매개변수
  return 값 (api 에서는 response 값)
  외부에서 return 값이 들어올 때

• 이 전에 먼저 배워야할 개념 : 옵셔널 체이닝, null 병합 연산자

📌 ?? (null 병합 연산자) vs || (논리연산자를 이용한 단축평가)

(1) ?? (null 병합 연산자)

좌항의 피연산자가 null, undefined 인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다. 변수의 기본값을 설정할 때 유용하다.

(2) || (논리연산자를 이용한 단축평가)

좌항의 피연산자가 null, undefined, false, 0, NaN 등 false 값 인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다. 변수의 기본값을 설정할 때 유용하다. 그래서 예기치 않은 동작이 발생할 수 있으므로 주의 해야한다

📌 ?. (옵셔널 체이닝)

좌항의 값이 null / undefined 인 경우 에러가 아닌 undefined를 반환하고 아니면 우항의 프로퍼티 참조를 이어간다.

---

1. useEffect 에서 처리해주기

useEffect(()=>{
  if(!num){
    alert('num 변수가 없습니다.')
    return;
  }
  usingNumApi();//num이라는 변수를 path 로 사용하는 api
},[])

2. null 병합 연산자와 옵셔널 체이닝 사용하기

const usingNumApi=async()=>{
  try{
    const { data }=await ApiConfig.request({
      method:get,
      url: url,
      path:{
        // num 값이 없을 때 
      	num: num ?? 1
      }
    })
    if(data?.isSuccess){
      setData(data.result ?? [])
    }else{
      // message 값이 없을 때 
      alert(data?.message ?? '서버에서 에러가 발생했습니다.')
    }
  }catch(e){
    console.log(e)
  }
}

3. 유효성 검사 미리 해주기

data body 값에 들어가는 데이터에 대한 유효성검사를 다 끝내준 뒤 api 를 호출한다.