React | 배열 타입 State 업데이트

---

State에는 JavaScript에서 지원하는 모든 타입의 값이 할당될 수 있다. ex) string, number, boolean, array, object 등등...

그 중 핵심은 State 값이 불변을 유지하면서 업데이트 되어야 한다는 점이다.

배열 타입 State 업데이트 방법은 많지만 이하 세 가지 방법에 대해 살펴보려고 한다.

 

concat() 사용

• 배열에 새로운 요소를 추가하여 새로운 배열을 만드는 JavaScript 배열 메서드 중 하나이다.
• 기존 배열을 변경하지 않고 새로운 배열을 반환한다. (불변성 유지)

const [myArray, setMyArray] = useState([1, 2, 3]);

const addElementConcat = (newElement) => {
  setMyArray((prevArray) => prevArray.concat(newElement));
};

---

전개연산자(`...`) 사용

• 원본 배열의 모든 요소를 새로운 배열로 복사한 후 새로운 요소를 추가한다. (불변성 유지)

const [myArray, setMyArray] = useState([1, 2, 3]);

const addElementSpread = (newElement) => {
  setMyArray((prevArray) => [...prevArray, newElement]);
};

---

push() 사용 (비추)

• 배열에 새로운 요소를 추가하는 JavaScript 함수이다.
• 원본 배열을 변경하고, 변경된 배열의 길이를 반환한다.
• 원본 배열을 직접 변경하기 때문에 불변성을 유지하지 못한다. -> React에서 상태 업데이트 시 권장되지 않는 방법

const [myArray, setMyArray] = useState([1, 2, 3]);

const addElementBad = (newElement) => {
  const newArray = myArray;
  newArray.push(newElement);
  setMyArray(newArray);
};

---

Array.from() + push() 사용

• Array.from()은 새로운 배열을 생성하여 반환하는 JavaScript 메서드 이다.
• Array.from()을 사용하면 새로운 배열을 생성할 수 있기 때문에 불변성을 유지할 수 있다.
• 어떻게 해서도 push()를 사용하고 싶다면 다음과 같이 구현해볼 수 있다.

const [myArray, setMyArray] = useState([1, 2, 3]);

  const addElementArrayFrom = (newElement) => {
    const newArray = Array.from(myArray);
    newArray.push(newElement);
    setMyArray(newArray);
  };