[Udemy] searching xx -7

map

• "console.log"가 여전히 보이지 않는 경우, 다른 검색을 통해 이미지 정의를 연 다음 네트워크 태그로 들어가 미리보기 태그를 선택하려는 요청을 찾으면 결과를 볼 수 있고 각각의 다른 이미지의 정의를 볼 수 있다. 우리가 이미 이 이미지 오브젝트의 안쪽을 조금 들여다봤다는 것을 기억하실 겁니다. url 속성이며, 이 안에 몇 개의 다른 url에 대한 링크가 있습니다,우리는 이중에서 regular가 필요하다
  

• we will reference "image.urls.regualr" and that's going to return that really long you are right there and then finally we need to make sure that we take this rate that gets return from the "map" statement and return it from the image list.

<imageList.js>

import React from 'react';

const ImageList = props => {
  const images = props.ImageList.map(image => {
  
  // so back inside of our image list to specify the actual url for the image you want to show on the screen.
  
    return <img src={image.urls.regular} />;
    
  });
  return <div>{images}</div>;
};

export default ImageList;

• so you know we don't have to always return a div or some element from a component.

• 하기와 같이 할 수 있다

const ImageList = props => {
  return props.ImageList.map(image => {
    return <img src={image.urls.regular} />;
  });
 
};

• we could have just as easily return that array directly like so that would have been an option but when we eventually come back to this component and do some of that work for the 2version of all the stuff right here we're going to need to be wrapping this list of images with a couple of different elements.

so that's why i'm just going to leave the div in here for new even though it's not strictly necessary.

• the searching result as below.