[Error handling] 리액트 토글버튼

김민찬·2022년 9월 24일

React

목록 보기

9/14

리액트 토글버튼에서 checked와 onClick을 동시에 사용했을 때 나타나는 에러 해결

import React from 'react';

const ToggleButton = ({ checked, handleToggle }) => {
    return (
        <label className="toggle">
            <input type="checkbox" checked={checked} onClick={handleToggle} />
            // ...중략
        </label>
    );
};

export default ToggleButton;

Error

프로젝트 중 체크 박스를 구현하다가 다음과 같은 에러를 맞이 했다.

Warning: Failed prop type: You provided a checked prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultChecked. Otherwise, set either onChange or readOnly.

글을 해석해보자면

checked props가 onChange 없이 사용되었다.
이로인해 읽기 전용 필드로 렌더링 된다.
만약 필드를 변경할 수 있는 경우 defaultChecked를 사용해라
아니면, onChange나 readOnly (읽기 전용) 으로 설정해라.

해결 방법

defaultChecked (X) checked (O)

defaultChecked는 form을 state로 관리하지 않을 때 사용하는 것을 권장한다.
defaultChecked는 onChange값과 관계없이 checked 값을 변경할 수 있다.

나는 state로 이 값을 관리하고 싶기 때문에 defaultChecked를 사용하지 않기로 했다.

onClick (X) onChange (O)

checked를 사용하는 것을 선택했기 때문에 onClick을 사용하지 못한다.
- 정확히 말하자면 동작은 하지만 에러가 뜨면서 리액트가 싫어 한다.
그래서 onChange를 사용하면되는데, 구현코드는 아래와 같이 onClick을 onChange로만 변경하면 된다.

import React from 'react';

const ToggleButton = ({ checked, handleToggle }) => {
    return (
        <label className="toggle-button">
            <input type="checkbox" checked={checked} onChange={handleToggle} />
            // ...중략
        </label>
    );
};

export default ToggleButton;