서버에서 받는 데이터 구조는 일반적으로 [{},{},{}...]의 구조를 가지고 있다
React 를 활용하여 개발 할 때, 위의 구조로 데이터를 받아 주로 map() 함수를 활용하여 컴포넌트를 재사용한다.
- user 라는 data를 받아 map() 함수를 돌리고 있는 코드 예시
React만 활용했을 때는 map() 함수만 적용하면 되었지만, 이제는 React + TypeScript 라는 꿀조합을 사용하고 있기 때문에 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>
data에 Type을 선언해 주어야 한다.
선언하는 방법은 매우 간단하다.
data 객체의 value 값이 어떤 타입을 가질 것인지 선언해 주면 된다.
Q. 서버에서 받아오는 data 구조에 맞춰 type을 선언해줄 수 있는 방법은 무엇일까?
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