React // Object.map is not a function

React에서 .map 을 써서 데이터를 뿌려줄 경우 생각보다 나한테 .map is not a function 에러가 번번히 떴다. 

원인은 .map()은 배열에만 가능하단 것이다. 그리하여 주로 map에서 원치 않는 포맷들로 이뤄진 데이터를 뿌려주려 할때 생기는 에러다. 예로들면 중괄호, 대괄호도 에러의 원인이 될 수도 있다.  아니면 state나 props의 형태가 Object가 아닌걸로 되어있을 수도 있다. 

 

일단, 이 에러를 숨기는 방법 -> 이 방법은 에러를 완전히 해결한다고 볼 수 없다. 

1.  JSX안에는 중괄효를 이용해서 표현식을 이용할 수 있다.  

{tmId.map((tm,index) => {
      return(
          <tr key={"b"+index}>
              <td>{index+1}</td>
              <td>{tm.hmName}</td>
              <td>{tm.leaveCategory}</td> 
              <td>{tm.stDate}</td>
              <td>{tm.edDate}</td> 
        </tr>
      )    
})} 

{tmId.map *** 에서

{tmId && tmId.map((tm,index) => {
      return(
          <tr key={"b"+index}>
              <td>{index+1}</td>
              <td>{tm.hmName}</td>
              <td>{tm.leaveCategory}</td> 
              <td>{tm.stDate}</td>
              <td>{tm.edDate}</td> 
        </tr>
      )    
})} ​

{tmId && tmId.map } 으로 바꿔주게 된다면  tmId && tmId.map이 true일때만 출력을 해주므로 map is not a function을 면할 수 있다.