HTML onclick 속성에서 객체를 전달할 때 발생하는 문제와 해결 방법

웹 개발을 하다 보면 onclick 속성에서 JavaScript 객체를 넘겨야 할 때가 있습니다.
하지만 이 과정에서 다음과 같은 오류를 종종 만나게 됩니다:

• Uncaught SyntaxError: Unexpected identifier 'Object'
• Uncaught SyntaxError: Unexpected token 'J'

이번 글에서는 이 오류가 발생하는 이유와, 이를 깔끔하게 해결하는 방법을 정리해보겠습니다.

---

문제 상황

아래와 같이 HTML 버튼에 객체를 직접 넘기려고 했습니다.

 

<button onclick="openProductPopup({name: 'apple'})">클릭</button>

 

결과:Uncaught SyntaxError: Unexpected identifier 'Object'

 

왜 이런 문제가 발생했을까요?

---

문제의 원인

HTML 속성값은 항상 문자열로 해석됩니다.

• HTML은 {} 같은 JavaScript 객체 표현식을 이해하지 못합니다.
• HTML에서는 속성 값 전체가 단순한 문자열로 읽히기 때문에 {}나 JavaScript 키워드는 구문 오류(SyntaxError)를 발생시킵니다.

즉, 객체를 직접 넘기려고 하면 브라우저가 이를 파싱할 수 없어 에러가 발생합니다.

---

올바른 해결 방법

핵심은 다음 두 가지입니다:

1. HTML 작성 시: 객체를 JSON 문자열로 변환해서 삽입해야 한다.
2. JavaScript 함수 내: 다시 JSON.parse() 해서 객체로 복원해야 한다.

1. 객체를 JSON 문자열로 변환하기

HTML 코드 작성 시 JSON.stringify()를 실제 데이터에 적용합니다.

// 방법1
var innerHTML = `<button onclick='openProductPopup(${JSON.stringify(product)})'>클릭</button>`

// 만약 방법1에서 큰따옴표나 작은따옴표 때문에 안되면 방법2
var innerHTML = `<button class="product-btn" 
	onclick="openProductPopup('${JSON.stringify(product).replace(/"/g, '&quot;').replace(/'/g, '&#39;')}')">클릭</button>`
$('#productList').append(innerHTML);
// replace 한 이유 : HTML용 이스케이프처리한것
// .replace(/"/g, '&quot;') // 큰따옴표를 &quot; (HTML 엔티티)
// .replace(/'/g, '&#39;')  // 작은따옴표를 &#39; (HTML 엔티티)

• 이때 ${JSON.stringify(product)}는 예를 들면형태의 JSON 문자열로 삽입됩니다.
• {"name":"apple","price":1000}

2. JavaScript 함수 내에서 다시 객체로 변환하기

openProductPopup 함수에서는 문자열로 넘어온 데이터를 JSON.parse()로 객체로 변환합니다.

function openProductPopup(productData) { 
    const product = JSON.parse(productData); 
    console.log(product.name); // "apple" 
}

 

이렇게 하면 HTML에서는 문자열을 안전하게 주고받고, JavaScript에서는 객체처럼 편하게 사용할 수 있습니다.

---

보너스: 더 안전한 방법 (추천)

HTML 속성에서 직접 코드를 넣는 대신, data- 속성을 활용하는 방법도 있습니다.

<button data-product='{"name":"apple","price":1000}' onclick="openProductPopup(this)"> 클릭 </button>


// var html = `<button class="product-btn" data-product='${JSON.stringify(product)}' onclick="openProductPopup(this)">클릭</button>`
// $('#productList').append(html);

 

function openProductPopup(buttonElement) { 
	const product = JSON.parse(buttonElement.dataset.product);
	console.log(product.name); // "apple" 
    
    // jQuery
    // var data = $(button).data('product');
    // 제이쿼리의 data메소드는 자동으로 JSON.parse해주기 때문에 또 JSON.parse하면 에러남
}

 

장점:

• 코드가 더 깔끔해집니다.
• XSS(교차 사이트 스크립팅) 취약성도 줄일 수 있습니다.
• HTML과 JavaScript 로직을 더 명확히 분리할 수 있습니다.

---

정리

항목설명

HTML 속성은 문자열만 가능	{} 같은 객체를 직접 넘길 수 없음
객체를 넘기려면	JSON.stringify()로 문자열화
다시 객체로 쓰려면	JSON.parse()로 복구
더 좋은 방법	data- 속성 사용 추천

---

마치며

onclick 속성에서 객체를 넘길 때 발생하는 문제는 생각보다 자주 만납니다.
이번 기회에 구조와 원리를 정확히 이해하고 넘어가면,
앞으로 HTML과 JavaScript를 섞어 사용할 때 훨씬 깔끔한 코드를 작성할 수 있을 것입니다.

🔥 함께 성장하는 개발자가 됩시다!

 

 

https://m.blog.naver.com/chuyj15/223828976226