React | TypeScript 반복문으로 컴포넌트 렌더 ( pass props )

map 메서드로 렌더링 하는 법.. 타입스크립트 어렵다

부모 컴포넌트

Place라는 인터페이스를 선언한다.

interface는 객체의 속성이나 함수의 파라미터 등에 대해 정의할 때 많이 사용된다.

interface Place {
  name: string;
  addr: string;
}

Place를 placeList라는 Place배열을 타입으로 갖는 PlacesProps인터페이스를 선언했다.

interface PlacesProps {
  placeList: Place[];
}

그리고 Places컴포넌트를 선언하는데, 함수형 컴포넌트로 선언해주었고,
인자값으로 PlacesProps를 받아 그 안의 속성인 placeList를 비구조화 할당으로 꺼낸다.

placeList는 배열이므로 map을 이용해 반복하여 PlaceItem컴포넌트를 렌더링 할 수 있다.
PlaceItem컴포넌트에 place객체를 전달하는 데 한참이 걸렸다..

key는 일단 임의로 index값이 할당되도록 해주었다. 원래는 식별자(PK)같은 값을 할당하는 것이 좋다.

const Places = ({ placeList }: PlacesProps) => {
  return (
    <div>
      {placeList.map((place, i:number) => (
        <PlaceItem key={i} place={place} />
      ))}
    </div>
  );
};

export default Places;

아마 이대로만 하면 막 에러가 뿜어나올 것이다..

자식 컴포넌트

여기서도 똑같이 일단 props를 정의하는 인터페이스를 선언해준다. key와 place를 받고있으므로 해당 값들로 속성을 정의한다.

interface PlaceProps {
  place: {
    name: string;
    addr: string;
  };
  key: number;
}

아래는 똑같다.

const PlaceItem = ({ place, key }: PlaceProps) => {
  return (
    <div>
        <p>{place.name}</p>
        <p>{place.addr}</p>
    </div>
  );
};

export default PlaceItem;

타입스크립트가 너무 어려워서 여기까지만 하고,, 타입스크립트 공부를 하는게 낫다고 판단,,,, 난 야생형은 아닌것같다..^^...,,