본문 바로가기

프로젝트

TIL-221030- select태그 에서 객체값 가져오기

 

오늘은 상품 정보에 대한 것을 리액트에서 처리를 해주면서 문제였던 것은 바로 select 의 값을 객체를 받아오는 것에 에를 먹었다.

 

productOptions는 productOption 객체의 리스트이다. 옵션명과 해당옵션을 선택하면 추가로 내야 하는 돈을 가지고 있다.

 

event.target.value로 선택한 productOption객체를 가져오면 간단하게 끝나는 것 같지만 문제가 생겼다.

 

문제포인트 

productOption을 console.log로 찍어보면 객체가 아닌 [object Object]라는 문자열로 표시될 뿐이다.

문자열이기 때문에 해당 object를 사용할 수가 없다. 

 

[object Object]

Object.prototype.toStirng의 인자로 객체가 들어왔을 때 나타나는 결과물이다. 

즉, 어떤 클래스타입인지 알려주는 Object.prototype.toStirng의 출력값이라는 것이다.

 

왜 니놈이 나온 거냐?

 

알고보고 싶지만 일단은 시간이 없어서 다음에 알아보도록 하고  해결법을 알아보자

 

TEST.1

Select의 Option의 Value속성에 객체말고 문자열을 전달했을 경우에는 정상전달이 가능할까?

 

option의 value를 productOption.description으로 전달을 하고 event.target.value를 console로 출력을 해보면

 

option description의 값이 잘 나온다.  

 

그렇다면 문자열은 잘 전달이 된다고 판단을 할 수 있겠다.

 

그렇다면 ProductOption을 문자열로 변환을 하면 된다. 

자바스크립트의 JSON.stringify(Object)함수를 통해 객체를 직렬화(json)으로 변환이 가능하다. 

그렇다면 문자열로 변환이 될 것 같다. 

 

 

 

이런식으로 value를 JSON.stringify로 변환을 해주고 event.target.value를 콘솔로 출력을 해주면 

 

 

이런식으로 직렬화된 "문자열"로 출력이 된다. 이렇게 출력된 값은 객체 처럼 prodcutOption.addAmount의 값을 꺼내 올 수는 없다.

객체가 아니라 문자열이기 때문이다. 

 

그렇기 때문에 이렇게 JSON.parse함수를 통해서 우리가 사용할 수 있는 객체로 변환을 할 수 있다.