[React] state 변경함수의 특징과 array/object

C-1. array/object 다룰 때 원본은 보존하는 게 좋음

array나 object 데이터를 다룰 땐 원본을 직접 수정하지 않고 복사본을 만들어서 수정하는 방식으로 코딩하는 것이 권장된다.

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

function App() {

  let [title, b] = useState(['오늘 점심 추천', '오늘 저녁 추천', '내일 아침 추천']);
  let [like, likeChange] = useState(0);

  return (
    <div className="App"> 
      <div className="black-nav">
        <h4>ReactBlog</h4>
      </div>
      <div className="list">
        <button onClick={ () => {
          let copy = [...title];    //copy 생성
          copy[0] = '점심 뭐먹징;'
          b(copy)}}>
            버튼
        </button>
        <h4>{ title[0] } <span onClick={ () => { likeChange(like+1) } }>👍</span> {like} </h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  );
}

export default App;

<button onClick={ () => {
  let copy = [...title];
  copy[0] = '점심 뭐먹징;'
  b(copy)}}>
    버튼
</button>

그런데 이 코드.. 왜 […title]일까?

C-2. JS array/object 특징

자바스크립트에서 ‘let arr = [1, 2, 3];’을 선언하면 [1, 2, 3]을 미지의 공간(RAM)에 저장해놓고 [1, 2, 3]이라는 array의 위치만 arr 변수에 저장된다.

그래서 왜 […title]인데?

let copy = [title];    //copy 생성
copy[0] = '점심 뭐먹징;'

이렇게 작성해도 array copy의 copy[0]은 ‘점심 뭐먹징’으로 변경된다.

그러나 array만 변경했지 변수 arr에 저장된 위치는 변경되지 않았다.

그래서 arr에 저장된 위치는 동일하므로 state 변경함수의 특징에 따라 state 변경함수가 작동하지 않는다.

[...title]는 작동하는 이유는
...이 array나 object 자료형 왼쪽에 붙여서 괄호를 벗겨주는 spread operator라고 하는 문법이기 때문이다.

[...title]은
1. title의 괄호를 벗긴다.
2. ‘...title’을 둘러썬 괄호로 새로운 array로 만든다.
3. 새로운 array이므로 저장된 위치가 다른 독립적인 복사본이 생성된다.
4. 그러므로 state 변경함수가 작동한다.

 

D. state 변경함수 특징

let [작명1, 작명2] = useState(보관할 자료)

작명1 - state에 보관했던 자료

작명2 - state 변경도와주는 함수

 

D-1. 기존state와 신규state 비교

state 변경함수는 ‘작명2(신규state)’ 기존state(작명1)을 신규state로 변경하는 구조이다. 그런데 기존state와 신규 state가 동일하다면 state 변경함수는 작동하지 않는다. 이렇게 동작하는 이유는 자원 절약을 위해서다.