[🍎코딩애플 강의요약] Array와 Object State 변경하기 📊

개요 📋

이 강의는 React에서 배열(Array)과 객체(Object) 타입의 state를 올바르게 변경하는 방법에 대해 다룹니다. 특히 참조 타입 데이터의 특성과 불변성(Immutability) 원칙을 이해하는 것이 중요합니다.

기본 개념 🔍

배열 State 수정하기 📝

let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬 독학']);

잘못된 방법과 올바른 방법 ⚠️

방법 1: 직접 state 값 교체 (간단하지만 확장성 부족)

// 버튼 클릭 시 첫 번째 항목 변경
<button onClick={() => {
  글제목변경(['여자코트 추천', '강남 우동맛집', '파이썬 독학']);
}}>수정버튼</button>

방법 2: 기존 state 직접 수정 (잘못된 방법)

<button onClick={() => {
  글제목[0] = '여자코트 추천';
  글제목변경(글제목); // 작동하지 않음!
}}>수정버튼</button>

방법 3: state 복사 후 수정 (잘못된 방법)

<button onClick={() => {
  let copy = 글제목;  // 얕은 복사 (같은 참조)
  copy[0] = '여자코트 추천';
  글제목변경(copy);  // 작동하지 않음!
}}>수정버튼</button>

[방법 2], [방법 3] 문제점:
let copy = 글제목은 실제로 복사가 아니라 같은 배열을 가리키는 참조를 만듭니다. 그래서 copy[0]을 변경하면 원본 글제목 배열도 함께 변경되죠. React는 상태가 변경되었는지 이전 값과 현재 값의 참조를 비교해서 판단하는데, 참조가 같으면 변경되지 않았다고 생각해서 리렌더링을 하지 않습니다.

방법 4: 스프레드 연산자로 복사 (올바른 방법) ✅

<button onClick={() => {
  let copy = [...글제목];  // 새로운 참조 생성
  copy[0] = '여자코트 추천';
  글제목변경(copy);  // 제대로 작동함!
}}>수정버튼</button>

참조 타입(Reference Type)의 작동 원리 📚

참조 타입의 특성

1. 배열/객체는 메모리에 저장되고, 변수는 해당 위치를 가리키는 참조를 저장
2. 참조 타입 변수를 복사하면 실제 데이터가 아닌 참조(화살표)만 복사됨
3. 같은 참조를 가진 변수들은 동일한 데이터를 공유함

let data1 = [1, 2, 3];
let data2 = data1;   // 참조만 복사됨
data2[0] = 1000;     // data1도 함께 변경됨
console.log(data1);  // [1000, 2, 3]
console.log(data2 === data1);  // true (같은 참조)

독립적인 복사본 만들기 (불변성 유지)

// 배열의 경우
let copy = [...기존state];  

// 객체의 경우
let copy = {...기존state};

State 변경함수 동작 원리 ⚙️

• React는 state 변경 시 기존 state와 새 state를 비교 (===)
• 참조가 같으면 변경으로 인식하지 않음
• 따라서 새로운 참조(독립적 복사본)를 생성해야 함

정리 및 응용 📌

1. 배열/객체 state 수정 시 독립적 복사본 생성 필수
2. 스프레드 연산자(...) 사용하여 복사
3. 복사본 수정 후 state 변경함수에 전달

응용 예: 가나다순 정렬 기능

<button onClick={() => {
  let copy = [...글제목];
  copy.sort();  // 알파벳/가나다순 정렬
  글제목변경(copy);
}}>가나다순 정렬</button>

---

강의 내용 검토 🔍

Claude.ai 에서 제시한 강의에서 보충하면 좋은 내용

1. 중첩된 객체/배열 처리 누락:
   강의에서는 단일 레벨의 배열/객체만 다루고 있습니다. 중첩된 구조(객체 안의 객체, 배열 안의 객체 등)를 다룰 때는 스프레드 연산자만으로는 깊은 복사(deep copy)가 되지 않는다는 점을 추가로 설명할 필요가 있습니다.

   // 중첩 객체의 경우
   let copy = {
     ...기존state,
     nested: { ...기존state.nested }  // 중첩 객체도 별도 복사 필요
   };

2. 성능 고려사항 누락:
   큰 배열이나 객체를 매번 복사하는 것은 성능에 영향을 줄 수 있습니다. 큰 데이터셋을 다룰 때는 useCallback, useMemo, 또는 Immer 같은 라이브러리 활용을 고려해볼 수 있다는 점을 언급하면 좋을 것 같습니다.

3. sort 메서드 주의사항:
   응용 문제에서 언급된 sort() 메서드는 원본 배열을 직접 변경한다는 점을 강조할 필요가 있습니다. 또한 기본 정렬은 문자열 기준이므로 숫자 정렬 시 주의해야 합니다.

4. 불변성의 중요성에 대한 설명 부족:
   강의에서는 "원본이 나중에 필요할 수 있어서" 불변성을 유지한다고 설명하지만, React의 렌더링 최적화와 관련된 더 중요한 이유가 있습니다. 상태 비교를 통한 렌더링 최적화와 예측 가능한 상태 관리를 위해 불변성이 필요하다는 점을 강조하면 좋을 것 같습니다.