[ Riot Games API 활용 전적 검색 App 07] - In Game 정보 리스트구현

오늘은 인게임 정보를 나타내는 리스트를 만들어 보려한다!

오늘하려는 것은 게임내에서 어떤아이템을 사용했고 어떤 캐릭터를 사용했고 우리팀은 누구고 킬,데스,어시스트 현황을보여주는

리스트 라고 생각하면 된다.

일단은 대충 간단한 내용 정도만 뿌려줘 보자!

• 인게임 리스트 구현  v 

먼저 구현할것은 위 사진처럼 View를 구성할것이다.

하지만 위 사진처럼 리스트를 구성하기 위해서는 필요한 데이터가 너무나 많다.

먼저 내가 사용할 수 있는 데이터는 아래 사진과 같다.

처음에 Axios를 통해 받아온 match 데이터 구조를 분석해보면 위 사진처럼 각 매치마다 8개의 Data가 들어온다. 

여기서 내가 사용할만한 데이터는 해당 매치에서 플레이한 챔피언, 라인, 시간 ... 정도?? 이다.

그렇게 되었을때 리스트 중 내가 컴포넌트로 구현 가능한 것은,

이정도 일 뿐이다. 그렇게 되면 너무 허전하니 라인과 플레이시간등등 넣을수 있는 데이터를 넣어서 Component를 만든다.

이렇게 리스트를 감싸주는 템플릿 컴포넌트와 안에 내용을 채워줄 아이템 컴포넌트를 만든 뒤 

넘어온 매치 Data를 map함수를 통해서 loop를 돌려 리스트 까지 구현하고 부트스트랩을 통한 스타일링 작업을 하였다.

상세보기 버튼은 부족한 인게임 정보를 보충해줄만한 매치의 Detail정보이다.

다음에 Detail까지 완료해서 마무리를 지어보도록하자!