React - 전개연산자(깊은 복사 vs 얕은 복사 차이점), map함수

안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)

yeonee 블로그 : 네이버 블로그

 

 

* '전개연산자' 란?

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

    깊은 복사 -> 값만 가져옴
    얕은 복사 -> 주소값만 복사하는것으로, 복사본에서 작업,수정한내용이 원봉에 영향을 끼치
    는 복사.

 

ex) const jeans = [1,2,3]; //
    const newjeans = [...jeans,4,5]; // [1,2,3,4,5]

 

import {useCallback, useState} from 'react';


//전개연산자를 활용한 이미지 추가기능
function Spread(){
    const [images, setImages] = useState([]);
    // images변수에 빈 배열 등록

    //;useCallback()으로 감싸주면 최적화시켜줄수있음
    const addImage = useCallback(() => {
        const random = randomImages(); //; Math.ceil(Math.random() * 5); 이게 여기 와도 똑같음
        const newImage = {
            id  : random ,
            src : `./img/flower${random}.jpg` //; public안에 있음을 의미 : ./ , img내부에서 찾는다는 의미 : /img
            //정적인 이미지파일들은 모두 public패키지안에 보관
        }
        setImages([...images , newImage]);
        /* 
            state의 images변수에 이전값들(...images)과 새롭게 생성된 이미지객체를
            함께 전달하여 수정한다.
        */
    },[images])

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

    const randomImages = () => Math.ceil(Math.random() * 5);
    // [].map(콜백함수) -> map함수? 배열이 있으면 각 item 함수를 호출 return
    return(
        <>  
            {console.log(images)}
            {
                images.map(
                    (img) => <img src={img.src} />
                )
            }
            <button id='add' onClick={addImage}>이미지 추가</button>
            <button id='clear' onClick={clearImage}>이미지 삭제</button>
        </>
    )


}

export default Spread;

 

---

 

* map 정의

Array.prototype.map ( callbackfn [ , thisArg ] )

ECMA에는 "주어진 배열의 값들을 오름차순으로 접근해 callbackfn을 통해 새로운 값을 정의하고 신규 배열을 만들어 반환한다"라고 정의되어있습니다.

 

ex)

const numbers = [1, 2, 3, 4, 5];
const result = numbers.map(number => number * number);

console.log(numbers);
// [1, 2, 3, 4, 5];

console.log(result);
// [1, 4, 9, 16, 25]

const numbers = [1, 2, 3, 4, 5];
const result = [];

for (i = 0; i < numbers.length; i++) {
    result.push(numbers[i] * numbers[i]);
}

console.log(result);
// [1, 4, 9, 16, 25]

 

* map 사용법

const numbers = [1];

numbers.map((number, index, source) => {

    // number: 요소값
    // index: source에서 요소의 index
    // source: 순회하는 대상

    console.log(number);
    // 1

    console.log(index);
    // 0

    console.log(source);
    // [1]

    return number * number;
});

// array 요소가 추가되는 경우
const numbers = [1, 2, 3, 4, 5];

const result = numbers.map(number => {
    numbers.push(number);
    return number * number;
});

console.log(result);
// [1, 4, 9, 16, 25];

// array 요소가 수정되는 경우
const numbers = [1, 2, 3, 4, 5];

const result = numbers.map(number => {
    numbers.pop();
    return number * number;
});

console.log(result);
// [1, 4, 9, empty × 2];

 

- 새로운 형태의 값 생성하기

const users = [
    { name: 'YD', age: 22 },
    { name: 'Bill', age: 32 },
    { name: 'Andy', age: 21 },
    { name: 'Roky', age: 35 },
];

const ages = users.map(user => user.age);

console.log(ages);
// [22, 32, 21, 35]

 

+ map함수 개념 부분은 https://7942yongdae.tistory.com/48 포스팅을 참고하여 작성하였습니다.