e.target.textContent

프로젝트를 진행하던 중, 해당 태그의 내용(text) 을 사용하고 싶어 console.log(e.target.value)를 썼지만 undefined 라는 값이 나와 헤맸던 경험이 있었습니다. 아래는 이를 해결하면서 정리한 내용입니다.

🔹 해결방안

<input
  value={content.title}
  id="title"
  type="text"
  name="title"
  placeholder="제목을 입력해주세요"
  onChange={changeHandler}
></input>

• 태그에 value 속성이 존재하는 경우
  e.target.value 는 undefined 가 아닌 값을 가집니다.

• 태그에 value 속성이 없는 경우 (아래 예시 코드 참고)
  e.target.textContent 를 사용하면 됩니다.

🔸 예시 코드

const Example = () => {

  const removeHandler = (e) => {
      const copied = content
      const copiedTags = copied.tags.filter(
        (item) => item !== e.target.textContent
      )
      setContent((prev) => {
        return { ...prev, tags: copiedTags }
      })
    }

  ...

  return (
      <span onClick={removeHandler}>{item}</span>
  )
}