위와 같은 큰 틀 안에서 react로 구현하려고합니다. 일단 백엔드로부터 아직 데이터를 받기전에 더미데이터를 이용해 원하는 모양대로 나오는지 만들어봤습니다. 개인정보수정 칸, 개인기록, 최근 경기기록, header, footer 이렇게 5개의 컴포넌트로 구성했습니다.
컴포넌트는 소프트웨어의 재사용성을 높이고, 유지보수를 용이하게 하기 위해 나온 기술입니다. 하나의 페이지에서 여러 개의 컴포넌트들이 다양한 기능들을 작동하게 됩니다. 그때 모든 것이 이어져있다면 관리하기 어려울 것입니다.
컴포넌트는 두 가지 인스턴스 속성으로 props와 state를 가지고 있습니다.
이러한 속성을 통해 컴포넌트는 props를 통해 데이터를 전달 받을 수 있고, state를 확인하여 변경되는 값을 확인할 수 있습니다.
import React from "react";
function UserinfoRecord({ game, goal, assist, penalty }) {
return (
<table className="userinfo">
<tr>
<td>총 경기: {game}</td>
<td>총 득점: {goal}</td>
<td>총 어시스트: {assist}</td>
<td>패널티: {penalty}</td>
</tr>
</table>
);
}
export default UserinfoRecord;
game,goal,assist,penalty 4가지 props를 통해 데이터를 전달 받았을 때 값으로 나오게 구성했습니다. 테이블 형식으로 구성될 수 있도록 <table>,<tr>,<td>
를 사용했습니다.
import UserinfoRecord from "./UserinfoRecord";
function UserinfoRecordList() {
const dummyData = [
{
game: 4,
goal: 10,
assist: 4,
penalty: 0,
},
];
return (
<div id="UserinfoRecordList">
<div>
<h4>개인 기록</h4>
{dummyData.map((persnal, i) => {
return (
<UserinfoRecord
key={i}
game={persnal.game}
goal={persnal.goal}
assist={persnal.assist}
penalty={persnal.penalty}
/>
);
})}
</div>
</div>
);
}
export default UserinfoRecordList;
간단한 더미데이터를 만든 뒤 userinfoRecord.js
파일을 가져와 map
메서드를 통해 데이터들을 나열해줍니다.
이처럼 간단히 테이블 형태로 데이터들을 받아오게되는데 추후에 사용자 각각의 정보를 서버로부터 받아오는 컴포넌트를 구성할 것 입니다.