map 타입 오류(방어 코드로 해결)

굉장히 유용하게 쓰고 있는 게 있다.

 

map을 돌리다 보면,이게 Array가 아니라 다른 내용물이 들어있을 수도 있기 때문에,

map을 그냥 돌리면 오류가 뜰 수 있다.

 

function NewPost({ club, setClub }) {
  // const currentClub = club.sort((a, b) => b.id - a.id);
  return (
    <div className="">
      <div className="clubCategoryBox">
        {Array.isArray(club) &&
          club.slice(0, 6).map((clubName, index) => (
            <Link
              to={`/meetHome/${clubName.id}`}
              className="newPostBox"
              key={index}
            >

 

Props를 내려받을 때 , club이 어떤 내용물인지 타입지정을 안해줬기 때문에 이렇게 사용했다.

 

{Array.isArray(club) &&

안에 돌릴 내용물 }

 

이건 자바스크립트의 Array객체의 'isArray'를 호출하는 것으로

이 메서드는 주어진 값이 배열인지 아닌지를 판단한다.

인수는 한개만 받는다. (여기서는 club)

 

그래서 "club이 배열이라면 map 돌려줘"가 되는 것이다.

 

 

개인적인 생각으론 너무 자료가 방대해서 일일이 다 타입을 지정하기 힘들 때

쓰는 게 좋을 거 같다고 생각한다.