[🌪 Error Handling] input value vs defaultValue & onChage/ 2021-09-27

### 어떤 에러인가요?
- input 창에서 quantity 버튼 눌러 갯수조정 시 0개 이하로 가면 return false 하는 함수 작성.
- input의 밸류가 defaultValue 로 되어있어서 if 문을 작성해도 적용되지 않음. [계속 마이너스 수량 표시가 됨.]
- 고정값인 defaultValue 에서 value 로 바꿔서 수량조절문제는 해결했지만 콘솔창에 다음과 같은 에러발생.

### 에러 메시지

**기존코드**
```js
//* 숫자 빼는 핸들러
const decrement = useCallback((e,id) =>{
const btn = e.target.parentNode.parentElement.querySelector(
'button[data-action="decrement"]'
);
const target = btn.nextElementSibling;
let value = Number(target.value);
if(value < 1){
return false;
}else{
value--;
target.value = value;
dispatch(setQuantity(target.value, id));
}
});

```

### 에러 핸들링 방법

- 에러코드를 읽어보니 readOnly와 defaultValue 가 아닌 이상 value 값을 사용할땐 onChange 가 있어야 한다고 쓰여있다.
- input값에 onChange 함수를 넣고 임의의 상태를 하나 생성하여 함수안에서 e.target.value 을 setMinusQuantity에 넣어주었다.
- const [minusQuantity , setMinusQuantity] = useState(0)
- 결과적으로 오류는 안나지만 minusQuantity를 쓰지않아 완전히 좋은코드라고는 볼 수 없는것 같다.
- 기존의 코드를 건드리지 않기 위해 임시방편을 썼지만 리팩토링 후 고치는시간을 가져보면 좋을것 같다.

**변경코드**
```js
const [minusQuantity , setMinusQuantity] = useState(0)
const onChangeQuantity = (e) => {
setMinusQuantity(e.target.value)
}
//* 숫자 빼는 핸들러
const decrement = useCallback((e,id) =>{
const btn = e.target.parentNode.parentElement.querySelector(
'button[data-action="decrement"]'
);
const target = btn.nextElementSibling;
let value = Number(target.value);
if(value < 1){
return false;
}else{
value--;
target.value = value;
dispatch(setQuantity(target.value, id));
}
});

```

이 경우, 밸류값은 고정된 값이 아니고 선택한 것에 따라 값이 바뀌는것이기 떄문에 defaultValue 를 쓰면 안된다.
예를들어 이름과 같은 단순 텍스트가 들어가고 변경되지않는 값이 들어갈땐 괜찮지만 (e.target.value 로 끝나는것들)
가격, 수량, 모바일(010-123-2222)등 함수안에서 어떤 조건을 주고, 값이 변경되면 value, onchange 를 써주면 된다.

### 에러 핸들링을 위해 참고한 레퍼런스 링크

[링크]()