<h>에 버튼 속성을 부여하면 ..

🤔  오늘의 에러

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()}.

 
 

🧐 처음 작성한 코드

처음에는 <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>
    )
  }) 
}

 
 

💡 해결 방법

button 속성 제거, <span>으로 클릭 이벤트 추가

디버깅 및 서칭을 해 보니, 위 에러는 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>
    )
  }) 
}

 
 

😅 Today I learned

사실 기능이 안 돌아갈 정도의 크리티컬한 에러는 아니었지만, 며칠 전 콘솔 에러를 그냥 지나치면 안 된다는 피드백을 받고 이제 콘솔 에러도 하나하나 살펴보면서 수정하고 있다. 뚝딱뚝딱 뜯어고치는 재미가 있다.