[React] 5강 | state가 array/object면

버튼 눌렀을 때 제목 변경

---

• array/object를 다룰 때 원본은 보존되는 것이 좋음 ⟶ copy 문법
• App.jsx

    let [글제목, 글제목변경] = useState(['스팀 할인 목록', '3월 전시 목록', '2025 영화 개봉작 목록'])
  
    let [하트, 하트변경] = useState(0);
  
    return (
        <div className="App">
        <div className="black-nav">
          <h4 style=>MyBlog</h4>
        </div>
  
        <button onClick={ ()=>{
          let copy = [...글제목]
          copy[0] = '스팀 할인 기간'
          글제목변경(copy)
        }}>글수정</button>
  
        <div className="list">
          <h4>{글제목[0]}<span onClick={ ()=> { 하트변경(하트+1) }}> ❤️</span> {하트} </h4>
          <p>2월 18일 발행</p>
        </div>
        <div className="list">
          <h4>{글제목[1]}</h4>
          <p>2월 18일 발행</p>
        </div>
        <div className="list">
          <h4>{글제목[2]}</h4>
          <p>2월 18일 발행</p>
        </div>
        </div>
    )
  

state 변경함수 동작원리

---

• state 변경함수 특징: 기존state == 신규state의 경우 변경 X
• array/object 특징: array/object 담은 변수엔 화살표만 저장됨

    let arr = [1, 2, 3]; // 1, 2, 3은 미지의 공간(RAM)에 저장
  

• ⟶ state가 array/object면 독립적 사본(shallow copy, deep copy)을 만들어 수정해야 함

• 다음 코드가 작동하지 않는 이유는

    글제목[0] = '스팀 할인 기간'
    글제목변경(글제목)
  

  기존state == 신규state(글제목), 글제목에 저장되어 있던 화살표는 바뀌지 않음.
  화살표만 수정했지, array는 수정하지 않았기 때문에.

    let copy = 글제목;
    copy[0] = '스팀 할인 기간'
    글제목변경(copy)
  

  글제목에 저장되어 있던 건 array가 아니라, 화살표. 화살표가 복사됨. copy안의 화살표는 바뀌지 않는다.
  변수1 & 변수2 화살표가 같으면 변수1==변수2 비교해도 true. 그렇기에 copy는 기존state와 달라지지 않았다고 생각. 따라서 바뀌지 않는다.

• let copy = [...글제목]
  • ...: 괄호 벗기고 다시 씌우기 ⟶ 독립적인 array 사본(화살표가 달라짐)

버튼 누르면 글제목 가나다순 정렬 기능 만들기(숙제)

---

• App.jsx

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