Dynamic Component Generation

좋아, 아니 그런데 말야 우리가 저번까지 마친 일들은 그다지 효율적이지 않아. 왜냐면 우리가 새로운 음식을 추가할 때마다 복사 붙여넣기를 해야하거든, 우리는 복사 붙여넣기를 원하지 않아. 데이터는 원래 처음부터 우리가 가지고 있던 데이터가 아니기 때문이야. 이 데이터들은 웹사이트에서 온 데이터들이야 따라서 우리는 갖고 있지 않은 데이터를 복사 붙여넣을 수 없어 . 따라서 내가 보여주려고 하는 방법은 웹사이트에 동적 데이터를 추가하는 방법이야. 우리가 할 것은 데이터가 있다고 시뮬레이션 하는거야. 데이터가 이미 API에서 왔다고 상상해보자. 따라서 할 일은 함수를 만드는거야, 다른 함수는 foodILike로 불리는 ARRAY야 ㅇㅋ? 이것은 food의 object의 배열이 될거야.

임의로 image 주소를 설정해놨어.

 

그런 다음에 우리가 할 일은 어떻게서든 여기에 어떤 마법을 부리는거야. 기본적으로 이 모든 component들을 rendering할거야. 다음과 같이 map을 이용해서 말이야.

 

 

자 그럼 실행하고 새로고침 해보자.

보다시피 잘 동작해. 

자 여기서 dish를 봐봐. dish는 object야, 기억해 매우매우 중요해!! 이건 object야 알겠지? 그리고 이 object는 현재 처리 중이야. 따라서 dish는 첫 번째로 kimchi object 그리고 Pizza object 그리고 hamburger object 등등이야.  일반적이 javascript object처럼 이 object 내부에서도 object.name, object.image를 가질거야 알겠지? 

이 object들에게 이미지를 제공해주자

자 이제 우리는 두 개의 props를 가지고 있어, 두번째 props도 사용해보자. 

 

이렇게 사용하여 사이트를 새로고침하면 아주 멋지게 동작을 잘 하는구만.

그런데 조금 더 map에 대해서 recap을 하는 김에 이렇게 코드를 작동시켜보자.

이렇게도 잘 동작을 하는 것을 알 수 있다.

지금 여기서 한 일들은 이전에 했던 방식과 같은것이다. 전에 했던 방식은 단순히 기본적으로 하나의 라인의 function과 arrow function을 사용했는데, 지금 이러한 방법도 사용할 수도 있는 것이다. 하지만 굳이 function을 하나 더 작성할 필요는 딱히 없기 때문에 이전의 상태로 돌아가자.

 

그리고 console창에서 뜨는 에러를 살펴보자

각각 list 내의 child는 unique한 key prop을 가져야 한다고 말하고 있다. 이 말은 모든 react의 element들은 유일해야하고 우리가 이들을 list 안으로 집어넣을 때, 이 녀석들은 유일성을 잃어버리기 때문임. 따라서 우리는 각 item들에 각각의 ID를 추가해주자. 

그리고 이걸 key prop으로 줘야겠지,

어떻게 해결되는지 봐보자. 해결됐다. 정말 간단한 에러다. 

보다시피, key prop은 Food로 전달되지 않아, 이걸 사용하지 않기 때문임. 이것은 기본적으로 react 내부에서 사용하기 위한거야. 지금까지가 react 그리고 prop을 활용하는 방법이야.

 

다음 포스트에는 우리가 원하는 Props를 받고 있는지 체크할 수 있는 방법을 보여주겠다. 우리가 원하는 props이 우리가 갖고 있는 props인지, 체크하는 방법이 필요하다.