react splice 제대로 파보기[각 메소드 반환값을 제대로 알아야 코드에러x]

[...배열명]

useState 함수는 새로운 상태로 리로드 해주는 것과 같다.

 

splice : 기존 배열 수정 + 반환값 출력.

 

반환값:

제거한 요소를 담은 새로운 배열.

하나의 요소만 제거한 경우 길이가 1인 배열을 반환합니다. 아무 값도 제거하지 않았으면 빈 배열을 반환합니다.

 

제거한 요소를 담을 공간이 없다면 제거만하고 제거한 내용은 출력은 못함.

아래 예시처럼 원본 수정만 원할 경우 변수할당을 하지 않으면 된다.

let copy = [...글제목1].splice(0,1,"여자 코트 추천") // 원본 대신 제거한 값만 출력하는 예시

let copy = [...글제목1] ;

 copy.splice(0,1,"여자 코트 추천")  // 바뀐 원본만 출력하는 예시

 

---

slice : 기존 배열 수정x + 반환값 출력.

 

반환값:

추출한 요소들만을 포함한 새로운 배열.

slice() 메서드는 어떤 배열의 begin 부터 end 까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 

---

splice 출력값 출력

let [글제목1, set글제목1] = useState(

    ['남자 코트 추천','강남 우동 맛집','파이썬 독학']

    );

 

<button onClick={()=>{

        let copy = [...글제목1].splice(0,1,"여자 코트 추천")

        console.log(copy)

        set글제목1(copy)

        // set글제목1([...글제목1].splice(0,1,"여자 코트 추천"))

      }}>안녕</button>

 

여기 콘솔에는 여자 코트 추천으로 대체된 값이 배열에 담겨서 반환되어 출력된다.

출력 값: ['남자 코트 추천']

---

splice 바뀐 원본 내역 출력

 

여기서 중요한 점은 splice의 반환값이 아니라, splice가 적용된 후의 copy 배열 상태가 상태 업데이트에 사용된다는 것입니다.

<button onClick={()=>{

        let copy = [...글제목1]

        copy.splice(0,1,"여자 코트 추천")

        console.log(copy)

        set글제목1(copy)

  

      }}>안녕</button>

---

간단한 메서드이지만, splice를 오해하고 매번 쓰고 있던 바람에 족히 40분은 이해하는데 쓴듯