span은 줄글에만 씁시다

퍼블리싱을 할 때 번거롭게 CSS를 넣는 것을 싫어해서 구분 지을 수 있는 건 다른 태그로 묶을 때가 있다.
예를 들면, 이런 식이다.

<ul>
    <li>
        <div>
            <img src="#" alt="아이콘" />
      	</div>
        <span>메뉴1</span>
    </li>
    <li>
        <div>
            <img src="#" alt="아이콘" />
      	</div>
        <span>메뉴2</span>
    </li>
</ul>

문제는 React에서 기능을 넣을 때 발생했다.
기능을 제대로 잘 넣은 거 같은데, 만들어놓은 매뉴를 누르니 계속 에러가 났다. 몇 시간을 잡다가 결국 팀장님께 SOS를 요청했다.


에러가 나는 곳에 console.log로 확인을 하니 (사실 이것도 잘못이다. console.log로 확인할 생각을 못하다니...) 기능에서 undefined가 출력되었고, 기능와 관련된 파일들을 확인하니 문제는 없었다.

https://stackoverflow.com/questions/32734337/getting-undefined-as-the-value-for-span-tag-while-traversing-a-table

무려 6년 전에도 이런 문제를 질문하는 사람이 있는걸 보면 초보 개발자가 쉽게 부딪히는 상황인 듯 하다.
span 요소에는 value가 아니라 연결된 text/html 속성이라 기능을 넣고 span 부분을 클릭했을 때 undifined 로 받아져서 error로 이어진 걸로 추측된다.
그래서 span을 삭제하고 css를 다시 수정하니 멀쩡하게 기능이 잘 돌아갔다.