숙제 : 버튼 누르면 첫 글이 ‘여자코트 추천’으로 바뀌는 기능 만들기

array/object 자료형 state 수정하는 방법

🎤 **`array/object 다룰 때 원본은 보존`**하는게 좋음

→ 원본은 `copy본(shallow copy) 만들어서 그걸 수정`하자

→ 왜냐하면 array/object는 reference data type이므로

<button onClick={()=>{ 
  **let copy = [...글제목]**
  **copy[0] = '여자 코트 추천'
  글제목변경(copy)** 
 }}>글수정</button>

array/object 자료형 state 수정할 때 변수 지정하기

 **let 복사본 = [...state변수] -> 괄호 벗겨주고 다시 괄호 씌워주세요(화살표도 달라짐. 새로운 화살표, 새로운 state)**

let copy = [...글제목]

• 이거는 글제목이라는 array 화살표를 뜻하므로 같은 화살표를 의미한다. 그래서 기존state==신규state이므로 변경을 안해줌

<button onClick={()=>{ 
  **let copy = 글제목**
  ****copy[0] = '여자 코트 추천'
  글제목변경(copy) 
 }}>글수정</button>

→ 변수1&변수2 화살표가 같으면 변수1==변수2 비교해도 true가 나옴

→ 여기서 글제목과 copy의 화살표가 같기 때문에 (글제목 == copy) 같은걸로 인식을 해서 변경을 안해줌

스프레드 연산자

[...변수] : 괄호를 벗겨주세요. 그리고 다시 괄호를 씌워주세요

state 변경함수 특징

• 기존state == 신규state의 경우 변경 안해줌 (자원절약차원)

글제목[0] = ‘여자코트 추천’;
글제목변경(글제목);

→ array를 수정했지 변수에 있던 화살표는 수정 안됨

→ 그래서 기존state==신규state로 생각하므로 변경이 안됨

array/object 데이터 특징(reference data type)

let arr = [1,2,3]; //1,2,3이라는 array를 미지의 장소(RAM)에 저장한 다음 화살표만 변수 arr에 저장. arr이 화살표역할

→ 1,2,3이라는 array를 어딘가(RAM)에 저장해놓고, 그 주소만 변수 arr이 가리키고 있는것!

→ array/object 데이터는 포인터를 저장한다

→ 그래서 내용이 바뀌어도 가리키는 포인터가 같기 때문에 그냥 바꾸면 변경이 안되므로 state변경이 안됨. 왜냐면 기존 state(글제목)와 신규state(글제목)가 똑같기 때문!!

→ …[변수] 는 괄호를 벗겨주세요 그리고 괄호를 다시 씌워주세요 라는 뜻. 즉, 완전 다른 것을 포인터함!

→ 그러므로 기존 state 와 신규state가 달라짐! 그래서 변경이 되는것이다

• let copy = [...글제목];: 기존의 "글제목" 배열을 복사하여 copy 배열을 생성합니다. 배열을 복사함으로써 원본 배열에 영향을 주지 않고 변경할 수 있습니다. 여기서는 배열 전체를 스프레드 연산자를 사용하여 복사하였습니다.
• copy[0] = "여자 코트 추천";: copy 배열의 첫 번째 항목을 "여자 코트 추천"으로 변경합니다.
• 글제목변경(copy);: 글제목변경 함수를 호출하여 "글제목" 상태를 copy 배열로 업데이트합니다. 이렇게 하면 화면이 다시 렌더링되며, 첫 번째 글 제목이 "여자 코트 추천"으로 변경됩니다.

[코드]

import logo from "./logo.svg";
import { useState } from 'react';
import "./App.css";

function App() {

  let [글제목,글제목변경] = useState(['신촌 스시 맛집', '압구정 스시 맛집', '잠실 스시 맛집']);
  let [따봉, 따봉변경] = useState(0);

  return (
    <div className="App">
      <div className="black-nav">
        <h4>BLOG</h4>
      </div>

      <button onClick={()=>{
        let copy=[...글제목];
        copy[0]='여자코트추천';
        글제목변경(copy);
      }}>글제목변경</button>

      <button onClick={()=>{
        let copy=[... 글제목];
        copy.sort();
        글제목변경(copy);
      }}>

      가나다순 정렬</button>

      <div className="list">
        <h4>{글제목[0]}
        <span onClick={ ()=>{ 따봉변경(따봉+1) } }>👍</span>{ 따봉 }</h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
        <h4>{글제목[1]}</h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
        <h4>{글제목[2]}</h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  );
}

export default App;

숙제 : 가나다순 정렬버튼

<button onClick={()=>{
        **let copy = [...글제목]**
        **copy.sort()**
        글제목변경(copy)
      }}>정렬</button>

solution

1. array자료형이므로 […state변수] 를 shallow copy본에 저장
2. 정렬함수인 .sort() 사용
3. state변경함수(state 카피 변수)

💡 state가 array/object면 독립적인 복사본(shallow copy)을 만들어서 수정해야함