서버에서 받는 데이터 구조는 일반적으로 [{},{},{}...]의 구조를 가지고 있다

React 를 활용하여 개발 할 때, 위의 구조로 데이터를 받아 주로 map() 함수를 활용하여 컴포넌트를 재사용한다.

• user 라는 data를 받아 map() 함수를 돌리고 있는 코드 예시
  

React만 활용했을 때는 map() 함수만 적용하면 되었지만, 이제는 React + TypeScript 라는 꿀조합을 사용하고 있기 때문에 data의 type 또한 지정해 주어야 한다.

Data 구조에 맞춰, type 선언하기

data = [
  {
      id: "abd12",
      name: "John",
      phone: 01077777777,
      contents : "안녕하세요" 

  },
  {
  ...
  },
  .
  .
  .
]

위와 같은 data구조가 여러개 넘어온다고 가정해보자.
컴포넌트 재사용을 위해 map()함수를 사용하고, 반복 사용 되는 Component에서 필요한 곳에 data의 key 값을 넣어 준다.

• 해당 위치에 각 key값을 넣어준다

<div>{data.id}</div>
<div>{data.name}</div>
<div>{data.phone}</div>
<div>{data.contents}</div>

React와 TypeScript 조합을 활용하고 있기 때문에

data에 Type을 선언해 주어야 한다.

선언하는 방법은 매우 간단하다.
data 객체의 value 값이 어떤 타입을 가질 것인지 선언해 주면 된다.

Q. 서버에서 받아오는 data 구조에 맞춰 type을 선언해줄 수 있는 방법은 무엇일까?

• 객체로 type을 지정해주고, 이를 참조시켜 한번에 type을 선언하는 방법인 interface를 활용하면 된다.

interface IProps {
	data : {
            id : string,
            name: string,
            phone: number,
            contents: string
        }
}

const DataType = ({data}: IProps) => {
	const {id, name, phone, contents} = data;
	
        return(
        <>
            <div>{id}</div>
            <div>{name}</div>
            <div>{phone}</div>
            <div>{contents}</div>
        </>
    
    );

};

export default DataType