[React] Object Map으로 렌더링하기

  return (
    <div>
      <input onChange={onChange} onKeyDown={onEnterDown}/>
      <div> {history.map((value, i) => (<p key={i}>{i} : {value}</p>))}</div>
    </div>
  )
  

history는 redux로 관리하고 있는 상태이다.
initialState로 빈 배열을 줘서 배열이라고 생각해서 그냥 map()을 돌렸는데, 대충 이런 에러가 나왔다.

Uncaught TypeError: history.map is not a function

그것도 크롬에서는 잘 동작하는데 엣지에서는 렌더링 자체가 안되었다.
해결해보고자 이리저리 구글링을 했다.

history를 콘솔로 찍어보니 type이 객체였다.
객체를 map() 돌리려고 하니 나오는 오류였다.

https://ywtechit.tistory.com/162

그래서 history에서 안에 배열을 꺼내서 map()을 돌릴 수 있도록 참고하였다.

  return (
    <div>
      <input onChange={onChange} onKeyDown={onEnterDown}/>
      <div> {Object.values(history).map((value, i) => (<p key={i}>{i} : {value}</p>))}</div>
    </div>
  )
  

이런 식으로 history 안에 value를 꺼내서 map()을 돌리니 엣지에서도 오류 없이 잘 동작하였다.