3월 8일 TIL

데이터의 불변성

• 어제의 블로깅의 연장선임

  const deleteCategoryHandler = (categoryId: number) => {
    const findCategoryIndex = categoryList.findIndex((el) => {
      return el.categoryId === categoryId;
    });
    categoryList.splice(findCategoryIndex, 1);
    setRenderState(!renderState);
  };

• 우선 해당 코드는 서버를 통해 delete가 될 데이터이다 보니 원본 배열을 수정하는 method를 사용했음
  • user의 입장에서의 눈속임정도임
  • 이부분을 감안하고 봐주시길!

불변성(Immutability)

• 데이터를 변경할 때, 기존 데이터를 직접 수정하는 것이 아니라 새로운 데이터를 생성하여 변경하는 원칙임
  • 이것은 함수형 프로그래밍과 관련있음
• 자바스크립트에서 객체와 배열은 참조 타입임
  • 변수에 담긴 값은 실제 데이터가 저장된 주소를 가리키고있음
  • 따라서 변수를 복사하면 값이 아닌 주소가 복사되는 특성 때문에 객체나 배열을 수정할 때
    • 기존 객체나 배열의 값을 변경하면 참조하는 모든 변수에 영향이 갈 수 있음
• 이걸 방지하기 위해서는 불변성을 유지해야함
• 불변성을 유지하면 기존 객체나 배열을 수정하지 않고 새로운 객체나 배열을 생성하므로, 예상치 못한 결과를 방지할수 있음
  • 불변성을 유지하면 리액트에서 상태관리를 문제없이 할 수 있고
  • 불변성이 보장되는 데이터 구조에서는 언제나 이전 상태를 유지하면서 새로운 상태를 생성할 수 있기 때문에 디버깅이나 테스트 등의 작업을 쉽게 할 수 있음
  • 예를들면 배열에서 요소를 삭제할 때, 기존 배열에서 요소를 삭제하는 대신, 새로운 배열을 생성하여 삭제하는 것이 불변성을 유지하는 방법임