codestates / codestates/Pointrip
[Error Handling] 배상건 / input 태그 value 속성 에러
- Dominant language
- TypeScript
- Stars
- 0
- Forks
- 0
- PR merge metrics
- No merged PRs in 30d
Description
> ### 어떤 에러인가요?
> input 태그의 속성으로 사용한 value 의 값을 state로 지정해놓았습니다.
> 이때, 컴포넌트 객체의 상태를 관리하는 state는 한번 지정하고 나면, 값을 변경할 수 없습니다.
> 따라서, input태그에 value 값이 존재한다면,
> 1) 변해야하는 값을 갖는지,
> 2) 변하지 말아야할 값을 갖는지
>
> 에 따라 조작이 필요합니다.
> 아래 에러는 변하지 말아야 할 값(state)을 할당받은 value 속성이 코드 내에 포함되어 있으므로,
> onChange 혹은 readOnly 속성을 추가하여 변화를 막아라는 경고 입니다.
> ### 에러 메시지
> ```shell
> Warning: Failed prop type:
> You provided a `value` prop to a form field without an `onChange` handler.
> This will render a read-only field. If the field should be mutable use `defaultValue`.
> Otherwise, set either `onChange` or `readOnly`.
> ```
> ### 에러를 일으킨 코드
```tsx
const [addressInput, setAddressInput] = useState("");
{/* 주소 input태그는 readonly로 설정하고 주소검색 모달을 이용한다. */}
{/* SearchAddress 컴포넌트를 사용하여 주소검색기능 구현 */}
{/* SearchAddress 컴포넌트에서 상태끌어오기를 진행 => addressInput 상태가 검색주소로 변경된다면, */}
{/* 검색된 주소가 Map API로 출력 */}
{/* 만약, 검색자체를 하지 않아, addressInput 상태가 빈문자열이라면 */}
{/* null 처리한다. */}
```
> ### 에러 핸들링 방법
> * 핸들링 방법에 대해서 간단하게 기록해보세요.
> 1) input 태그 내 value 속성이 있는지 확인
> 2) value속성이 있다면, 변화되지 말아야하는 값인지, 변화되어야 하는 값인지 판단한다.
> 3) 변회되지 말아야 하는 값이라면, readOnly 속성을 추가하여 변화되지 않게 막는다.
> 4) 만약, 변화되어야 한다면, 2가지 방법이 있다.
> 4_1) 단순히 경고를 회피하려면, value 속성을 defaultValue속성으로 바꿔주면 된다.
> 하지만, defaultValue={this.num}으로 변수값을 주고 이벤트를 발생시키면,
> 정상적으로 작동되지 않는 문제(input에서 다른값으로 고쳤지만 실질적으론 값이 변하지 않았음)가 발생한다.
> 4_2) 이를 해결하기 위해 onChange 이벤트 속성을 이용하여 값이 변하면, 이벤트 메소드를 실행하여 변수값에 대입해주면 된다.
>
> ```tsx
>
>
>
>
>
> ```
>
> ### 에러 핸들링을 위해 참고한 레퍼런스 링크
> 링크: https://note.redgoose.me/article/1848/
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.