[React] mapping - reorder data - mapping

mapping하고 순서를 적용하려면 key를 설정해주어야한다

key는 유일값이여야 함

 

1. ImageList.js

    import ImageShow from "./ImageShow";
    import './ImageList.css';

    function ImageList({images}){
        const renderImages = images.map((image) => {
            return <ImageShow key={image.id} image = {image}/>
        });

        return <div className="image-list">{renderImages}</div>;
    }
    export default ImageList;

여기서 ImageShow 태그에 key를 추가해주었습니당

 

사진을 가로 최대 6개까지 나오게 하기 위해서 css도 추가함

 

2. ImageList.css

    .image-list{
        columns: 6 100px;
        column-gap: 10px;
    }
    img{
        width: 100%;
        margin-bottom: 10px;
    }

colums라는 속성과 column-gap을 사용하여 적당히 예쁘게 뿌려준다.

 

 

 

3. SearchBar.css

    .search-bar{
        border: 1px solid lightgray;
        border-radius: 5px;
        padding: 10px;
    }
    .search-bar form{
        display: flex;
        flex-direction: column;
    }

 

텍스트 입력창에서 속성 추가함

 

그럼 "cats"로 검색한 결과는

이렇게 나온다

 

긑!