Warning: Invalid DOM property `for`. Did you mean `htmlFor`?label 문제

            <RadioContainer>
                <input
                    type="checkbox"
                    id="scales"
                    name="scales"
                    checked={checked}
                    onChange={checkChangeHandler}
                />
                <StyledLabel for="scales">Scales</StyledLabel>
            </RadioContainer>​

위와 같이 label을 활용해 input의 클릭 유효범위를 늘리는 것을 목표로했다.

 

이런 오류가 발생했다.

간단하게 for가 htmlFor를 의미하냐는 것으로 해석해서 아래와 같이 수정했다.

 

            <RadioContainer>
                <input
                    type="checkbox"
                    id="scales"
                    name="scales"
                    checked={checked}
                    onChange={checkChangeHandler}
                />
                <StyledLabel htmlFor="scales">Scales</StyledLabel>
            </RadioContainer>

깔끔하게 해결.

사소한 것들이 참 힘들게한다.