Dynamic Component Generation

앞서 포스팅한 내용중 복사 붙여넣기로 컴포넌트에 다른 값을 계속 주는 것은 효율적이지 못하다.

예를들어 브라우저에서 데이터가 오면 그 데이터를 복사 붙여넣기로 넣을 수 없기 때문이다.

이제 웹사이트에 동적 데이터를 추가하는 방법을 알아야 한다.

 

예를 들어 서버에서 좋아하는 음식의 이름과 이미지가 담긴 리스트 데이터가 온다고 생각해보자

그럼 이 데이터들을 어떻게 하나씩 처리 할 것인가.

 

우선 가짜 리스트를 하나 만들어본다. 음식의 이름과 이미지가 담긴 리스트이다.

니코는 말한다 react는 just javascript라고 ~ 자 리스트 배열에 담긴것을 하나씩 무언가 적용시킬 때 쓰는 함수는?

forEach도 있고 map도 있지만 여기서는 내가 적용시킬 것을 적용하고 그대로 리스트를 반환 할 것이므로

map을 사용한다.

 

App함수에 내가 만든 가짜 데이터인 foodILike 배열에 맵함수를 적용 시켜주는데 react에서는 {} 스코프 안에 써주면 자바스크립트로

인식을 한다. 그냥쓰면 just text이니 주의하자.

리스트에 맵함수를 적용하고 인자를 넣어준뒤 Food컴포넌트에 html처럼 props를 만들어 준다

그리고 각각에 원하는 키값을 넣어주는데 리스트에서 가져올 name과 image를 적용시켰다.

이렇게 하고 

Food 컴포넌트에 삽입!~! 해주면 

요렇게 적용이 되었다!~!~!

그리고 한가지 처음에는 id값을 주지않고 적용을 시켰더니 적용은 되지만 콘솔창에 워닝이 발생했다

검색해보니 react에서는 array안에 있는 child들은 unique한 key prop을 가져야 한다고 한다.

엘리먼트가 많을 경우 고유한 key가 필요하다고 하는 것인데...

그래서 각각에 id 값을 주고 key={food.id}로 유니크한 키를 설정해줬더니 에러는 사라졌다

그리고 한가지더 이미지를 적용시킬때 alt=""를 삭제하고 넣어줬더니 이또한 에러라기 보다는 뭐라고 뜨길래

보니 이미지가 없을경우 사용할 텍스트인 alt=""값을 넣어줘야 한다고 한다. 일단 넣어주니 사라지긴 했다~!

 

기억하자 react에서 자바스크립트로 인식하게 하려면 {}를 사용해야 한다~ 그리고 array에 엘리먼트가 많으면

고유의 키값이 필요하다