import { useState } from "react";

function App() {
  const initialState = ["apple", "banana", "cherry", "date", "elderberry"];

  const [array, setArray] = useState(initialState);
  const [result, setResult] = useState("");

  const handleSplice = () => {
    // 왜 array.splice(2,2) 하면 kiwi lime으로 반환되어 들어가지 않고
    // 원래 값인 [cherry, date] 만 콘솔에 찍히나?

    // 1. 새로운 배열과 기존 배열을 나눠서 합쳐봄
    // // const newArr = [...array];
    // // const newSplice = newArr.splice(2, 2);
    // // console.log(newSplice);
    // // console.log(array);
    // // const newSplice2 = array + newSplice;
    // // console.log(newSplice2);

    // 2. 새로운 배열을 만들어서 2,2범위에 kiwi lime 추가하고 setArray와 setResult를 진행
    // // const newArr = [...array];
    // // const newSplice = newArr.splice(2, 2, "kiwi", "lime");
    // // console.log(newSplice);
    // // setArray(newSplice);
    // // setResult(newSplice.join(", "));

    // 3. 2,3 즉 뒤에 모든 내용을 다 바꿈
    // array.splice(2, 3, "kiwi", "lime", "elderberry");
    // console.log(array);
    // // newArr.splice(2, 3);
    // // newArr[2] = "kiwi";
    // // newArr[3] = "lime";
    // // newArr[4] = "elderberry";
    // setResult(array.join(", "));

    const newSplice = array.splice(2, 2, "kiwi", "lime");
    console.log(newSplice);
    console.log(array);
    setResult(array.join(", "));
  };

  return (
    <div>
      <div>
        <button onClick={handleSplice}>splice</button>
      </div>
    </div>
  );
}

export default App;

[내 코드에서 splice에 대해서만 편집한 코드]

배열 매서드 splice가 어떤 식으로 결과값이 나오는지 알아보는 과정이
저렇게나 길다..

기본적으로

splice() 매서드

splice(인덱스번호,요소 몇개를 지울것인지, 뒤에는 대체하고 싶은 요소가 있는지)

이 처럼 몇번째부터 몇개를 지우고 만약 대체까지 하고 싶으면 요소를 넣어주면 되는 배열 매서드인데,
이렇게만 생각하면 아주 간단한 splice인데 직접 만들어보려니 잘 안되었다

위의 긴코드에서 아주 가볍게 예시를 다시 들자면

const a = [1,2,3,4,5];
const b = a.splice(0,1);
console.log(a) // [2,3,4,5];
console.log(b) // [1];

즉 배열 a에 splice로 0번째부터 1개의 요소를 제거한게 배열 b라면
그 후 배열 a엔 0번째 숫자 1이 사라진 [2,3,4,5]가 남게 되고,
그 뽑아낸 값이 b에 들어가면서 b는 [1]이 추출되게 된다.

이 과정을 그냥 들으면 바로 이해가 될테지만... 좀 더 기억에 선명하게
남기기 위해 별의 별 짓을 다 하였었는데....

오류 과정

• array.splice(2,2,"kiwi","lime")으로 하면 왜 array에 kiwi와 lime이 반환되지 않고 console.log로 찍으면 기존 값이 cherry, date만 찍히나?
  -> array를 콘솔에 찍었다면 정상적으로 나왔을 거임
  -> array.splice를 한 변수 이름을 콘솔에 찍어서 cherry, date만 나옴
• 혹시 setArray를 안해서 원하는 값이 안나온건가?
  -> 전혀 관계없음. 애초에 splice가 array의 값을 바꿔주기 때문
• splice 매서드 이용 후 newArr[2]="kiwi", newArr[3]="lime"이런 접근은?
  -> 불가능하진 않으나 splice매서드를 이용하는 목적과 달라짐

---

확실히 개념만 알고 사용을 직접해보려니 안되었던 부분이, 여러 시행착오를 겪고 완벽하게 이해되어서 너무나도 다행이다 ㅎㅎ