*** 노마드코더에서 무료로 강의해주는 ReactJS 강의를 보고 개인적으로 정리한 내용입니다. ***
React Application은 하나의 component만을 rendering해야한다.
이를테면,
위 코드는 Players라는 component에
name이라는 property를 다른 4개의 value로 준 것이다.
Players function의 인자로 name이 들어가기 때문에
위 코드의 실행 결과는 아래와 같다.
(H1 태그로 4개의 문장이 출력된다.)
+) Props로 들어가는 value의 자료형은 여러 가지가 될 수 있다.
+) Component는 대문자로 시작해야 한다.
하지만 위와 같은 방법은 데이터를 추가할 때마다 같은 코드를 copy&paste해야 한다. 또한 사진이나 다른 정보를 추가하려고 하면 HTML을 단순무식하게 수정해야한다.
보다 효율적인 코드 작성을 위해 JS의 map을 이용할 것이다.
Object의 list 형태로 출력 대상을 다시 선언해주고
(여기서 rating이라는 속성을 추가했다. href를 이용해서 사진을 추가하거나 다른 타입의 속성들도 추가 가능하다.)
App()에서도 map을 이용하여 player라는 이름으로 legendplayer의 속성을 동일하게 받는다.
그리고 동시에 Players()의 인자로 넣어준다.
-> 결국 react가 실행하는 것은 "App()"이기 때문이다!
참고로 Players의 구조는 위와 같다.
실행결과는 위와 같을 것이다.
App()내부의 HTML 부분을 직접 수정하는 것보다
object형태로 선언하여 필요한 속성을 추가 및 변경하는 방식이 더 효율적이다!
Javascript의 map을 이용한 방법을 살펴보았다.
