React 18 시작하기 (5) - array, object state 변경하는 법

---

지난 시간에는 state 변경 함수를 다뤄보았습니다. 이번에는 array나 object 자료형의 state 를 변경하는 법을 알아보겠습니다.

---

1. array나 object 자료형을 다룰 때는 원본을 훼손하지 않고 유지하는 것이 좋습니다. 버튼을 하나 만들고, 누르면 ‘남자코트 추천’ 이 ‘여자코트 추천’ 으로 바뀌도록 하려면 우선 state 를 전부 복사한 후, 해당하는 인덱스의 요소만 바꾸어 준 뒤, state 변경 함수를 사용합니다.

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

function App() {

  let post = '강남 우동 맛집';
  let [title, setTitle] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  let [good, setGood] = useState(0);

  return (
    <div className="App">
      <div className="black-nav">
        <h4 style={{color: 'red', fontSize : '16px'}}>블로그임</h4>
      </div>

      <button onClick={()=>{
        let copy = title;
        copy[0] = '여자코트 추천';
        setTitle(copy);
      }}>글수정</button>

      <div className="list">
        <h4>{ title[0] }<span onClick={()=>{setGood(good+1)}}>👍</span> { good } </h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
        <h4>{ title[1] }</h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
        <h4>{ title[2] }</h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  );
}

export default App;

---

2. 그런데 막상 ‘글수정’ 이라는 버튼을 눌러도 ‘여자코트 추천’ 이라고 바뀌지 않는 결과를 볼 수 있습니다. 이유가 무엇일까요? 이는 state 변경 함수의 동작 원리와 관련이 있습니다. state 변경 함수는 갈아치워주기 전에 인자에 담긴 값이 기존 state와 같을 경우에는 동작하지 않습니다.

---

3. c언어와 같은 다른 언어를 학습한 경험이 있다면, 포인터의 개념을 알고 있을 것입니다. 배열을 변수에 저장하면, 변수에 저장되는 것은 배열의 첫 번째 인덱스를 담고 있는 주소값 입니다. 마찬가지로, array나 object 자료형을 담고 있는 변수에 담기는 것은 주소값이기 때문에 복사본의 요소를 변경했다고 한들, 주소값은 변경된 적이 없기 때문에 state 변경 함수가 동작하지 않는 것입니다.

---

4. 그러면 어떻게 해야 할까요..? 답은 spread 연산자 ... 을 이용하는 것입니다. let copy = title 이 아닌, let copy = [...title] 이런식으로 작성해주어야 합니다. ... 자체는 괄호를 벗겨 달라는 뜻인데, 이를 다시 array 자료형으로 씌워주었으니 주소값 자체가 바뀌게 되어 state 변경 함수가 동작할 수 있게끔 해줍니다.

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

function App() {

  let post = '강남 우동 맛집';
  let [title, setTitle] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  let [good, setGood] = useState(0);

  return (
    <div className="App">
      <div className="black-nav">
        <h4 style={{color: 'red', fontSize : '16px'}}>블로그임</h4>
      </div>

      <button onClick={()=>{
        let copy = [...title];
        copy[0] = '여자코트 추천';
        setTitle(copy);
      }}>글수정</button>

      <div className="list">
        <h4>{ title[0] }<span onClick={()=>{setGood(good+1)}}>👍</span> { good } </h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
        <h4>{ title[1] }</h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
        <h4>{ title[2] }</h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  );
}

export default App;

---

+추가) state 를 가나다순으로 정렬하고 싶을 땐 어떻게 할까요?

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

function App() {

  let post = '강남 우동 맛집';
  let [title, setTitle] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  let [good, setGood] = useState(0);

  return (
    <div className="App">
      <div className="black-nav">
        <h4 style={{color: 'red', fontSize : '16px'}}>블로그임</h4>
      </div>

      <button onClick={()=>{
        let copy = [...title];
        copy[0] = '여자코트 추천';
        setTitle(copy);
      }}>글수정</button>

      <button onClick={ ()=>{ 
        let copy = [...title];
        copy.sort();
        setTitle(copy)
      } }> 정렬버튼 </button>

      <div className="list">
        <h4>{ title[0] }<span onClick={()=>{setGood(good+1)}}>👍</span> { good } </h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
        <h4>{ title[1] }</h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
        <h4>{ title[2] }</h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  );
}

export default App;