[object Object] 문제 해결

문제 발견

// 설명을 위해 요약된 코드
state.group.members.map((member, i)=>{
    <input onClick={(e)=>{test(e)}} value={member}/>
})

redux state에 members 라는 Object Array가 있고 거기서 하나씩 꺼내 input value에 넣어줬는데

클라이언트든 서버든 계속 object Object로 출력되고 안에 내용을 꺼낼 수도 없는 상태가 되버려 한참을 헤맸다.

 

해결책 도출

value 값에 JSON.stringify()로 넣어주기

꺼내온 값을 value에 그대로 박아 넣는 과정에서 문제가 생긴거라 판단해 

JSON.stringify로 감싸봤다.

state.group.members.map((member, i)=>{
    <input onClick={(e)=>{test(e)}} value={JSON.stringify(member)}/>
})

// value 출력: {"_id":"63871cb7637561dc3a9acdbc","id":"test3","name":"test3n","rank":1}

예상대로 object Object가 아니고 Object 안의 내용물이 보이게 잘 나온다.

 

함수에서 value값을 뽑아 쓸 때 JSON.parse() 사용

아래는 이 value 값을 받아 쓰는 test 함수이다. 

function pushCheckedValueToArrState(e) {
    if (e.target.checked) {
        console.log(JSON.parse(e.target.value));
        // {_id: '63871cb7637561dc3a9acdbc', id: 'test3', name: 'test3n', rank: 1}
    }
}

이제야 제대로된 Object가 출력된다. 

 

마치며

이렇게 받은 데이터를 useState에 넣고 Axios를 통해 Express 서버에서도 받아봤는데

console.log()로 뽑아봐도 아주 잘 출력되는걸 확인할 수 있었다.

 

사실 기본적인건데 항상 String, Integer 데이터만 보내다 오랜만에 Array, Object 데이터를 보내다보니 

이런 문제를 겪은 것 같다. 

 

오늘 있었던 일을 잊지말고 앞으로도 Array나 Object 데이터를 다룰 일이 있으면 JSON.stringify()와 parse()를 기억하자