오늘의 에러
React로 코드를 짜던 중, 오늘은 아래와 같은 콘솔 에러를 만났다.
Received `true` for a non-boolean attribute `button`.
If you want to write it to the DOM, pass a string instead:
button="true" or button={value.toString()}.
Shell
복사
처음 작성한 코드
처음에는 <h4> 요소에 button 속성을 부여해, 클릭하면 모달이 나타나고 다시 클릭하면 모달이 없어지도록 했다. 이 부분이 문제였다.
{
title.map(function(a, i){
return (
<div className="list" key={i}>
{/* 이 부분 수정 필요 */}
<h4 onClick={() => { setModal(!modal); setModalTitle(i) }}>{ title[i] }
<span onClick={()=>{
let copy = [...thumb];
copy[i] = copy[i] + 1;
setThumb(copy)
}}> 👍 </span>{ thumb[i] }
</h4>
<p className="share">📮 공유하기</p>
</div>
)
})
}
JavaScript
복사
해결 방법
디버깅 및 서칭을 해 보니, 위 에러는 JSX 사용 방식이 잘못되었기 때문에 발생한 것이라고 한다. 현재 <h4> 요소에 button 속성이 부여되어 있는데, button은 문자열 또는 불리언 값만 허용된다. 따라서 <h4> 요소에 button 속성을 제거하고, 대신 클릭 이벤트를 처리할 수 있는 요소인 <span>을 사용하여 클릭 이벤트를 추가하면 해결이 된다.
{
title.map(function(a, i){
return (
<div className="list" key={i}>
<h4>
<span onClick={() => { setModal(!modal); setModalTitle(i) }}>{ title[i] }</span>
<span onClick={()=>{
let copy = [...thumb];
copy[i] = copy[i] + 1;
setThumb(copy)
}}> 👍 </span>{ thumb[i] }
</h4>
<p className="share">📮 공유하기</p>
</div>
)
})
}
JavaScript
복사
Today I learned
사실 기능이 안 돌아갈 정도의 크리티컬한 에러는 아니었지만, 며칠 전 콘솔 에러를 그냥 지나치면 안 된다는 피드백을 받고 이제 콘솔 에러도 하나하나 살펴보면서 수정하고 있다. 뚝딱뚝딱 뜯어고치는 재미가 있다.