React (7) 전개연산자

■ 전개연산자(SpreadOperator)란?

- '...' 점 3개를 연달아서 사용하는 연산자로 여러 개의 객체를 병합하여 한개의 객체로 만들려고 할 때 사용한다.(깊은 복사)

예시)

const jeans = [1, 2, 3];  // 1, 2, 3
const newJeans = [...jeans, 4, 5] // 1, 2, 3, 4, 5

 

● 전개연산자를 활용한 이미지 추가 기능

function Spread(){
    const [images, setImages] = useState([]);
    // images변수에 빈 배열 등록

    const addImage = useCallback(() => {
        const random = randomImage();
        const newImage = {
            id : random,
            src : `./img/flower${random}.jpg`
            // 정적인 이미지파일들은 모두 public패키지 안에 보관
        }
        setImages([...images, newImage]);
        /*
            state의 images변수에 이전값들(...images)과 새롭게 생성된 이미지 객체를 함께 전달하여 수정한다.
        */
    },[images])

    const clearImage = () => {setImages([])}

    const randomImage = () => Math.ceil(Math.random() * 5);

    // [].map

    return(
        <>
            {console.log(images)}
            {
                images.map(
                    (img) => <img src={img.src} />
                )
            }
            <button id="add" onClick={addImage}>이미지 추가</button>
            <button id="clear" onClick={clearImage}>이미지 삭제</button>
        </>
    )
}