문제 상황: json 객체로 object를 부모로부터 Context로 받았고, 이 object 를 원하는 html 구조로 랜더링!
문제 포인트
● object 데이터를 어떻게 가공할 것인지
● html 랜더링은 어떻게?
● object의 길이가 각각 다를텐데 그럼 어떻게 랜더링?
하나하나 해결해보자
1. object 와 html
id, name, time, player, level 이렇게 구분되어 있는 object
useContext로 받아오고,( 구체적인 import 와 전체 코드들은 깃 참조)
내가 사용하고 있는 컴포넌트 밖에, 하나의 컴포넌트를 더 만들었다(동일한 페이지)
컴포넌트는 match라는 props를 받아올 것이고, return 을 html 태그들로 해준다!
그럼 우리가 사용하고자 하는 진짜 컴포넌트에서 <Mange match={match의 정보}/> 라면 호출이 가능하다는 뜻이다
그럼 obejct의 길이에 따른 랜더링이 필요할 것인데, (object의 길이가 3 일 때도 있고 10 일 때도 있을 건데..?)
하드 코딩은 할 수 없다
-> map 함수를 활용
2. map 함수의 개념과 활용
-map 의 개념
배열 안의 각 원소를 반환하여 새로운 배열을 만든다
[1,2,3,4,5] 라는 배열이 있고
double이라는 함수는 들어오는 변수를 2를 곱해서 return 해주는 함수다
newArray라는 새로운 배열이 만들어진 원리:
array의 각 요소 하나하나에 다 접근해서 double 이라는 함수를 적용하고, 이를
newArray에 저장한다
이 개념을 그대로 가져온다고 생각해보자
matchData라는 배열이 있고,
double이라는 함수 대신, match라는 요소가 오면 <Manage>를 return 해주는 함수라고 생각해보자
(map에서 쓰이는 match(주황색) 은 변수)
그럼 matchData 각각의 요소 하나하나에 접근해서 <Manage> 를 return 해줄것이다
다시 matchData를 보자(context로 받아와서 변수 이름은 다르다)
배열 속의 각각의 object에 접근해서, match라는 변수는 각각의 object에 처음부터 할당된다
거기서 가져온 정보를 <Manage> 라는 컴포넌트에서 (변수 이름 match) 라고 받아서, 이를 {} 문법으로
필요한 정보를 찍어낸다
ex) {match.name}
이해를 쉽게 하기 위해 배열 안에 사람 이름으로 object를 대신하고 생각해보자
3. 결과물
