React - useState - 3

React useState

useState에서 배열 또는 오브젝트 값을 변경할땐 배열의 값을 바꾼다고 값이 변경되지 않는다.

/* eslint-disable */

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



function App() {

  let post = 'Restaurant';
  let postId = 'postId';
  let [title, setTitle] = useState(['Title1', 'Title2', 'Title3']);
  let [blogTItle, setBlogTitle] = useState('ReactBlog');
  let [like, changeLike] = useState(0);

  return (
    <div className="App">
      <div className="black-nav">
        <h4 id={postId} style={{ color: 'red', fontSize: '16px' }}>{blogTItle}</h4>
      </div>

      <button onClick={() => {
        // 배열 0번째 값을 변경하고 다시 함수를 실행하면 변경이 안된다.
        title[0] = 'New Title1';
        setTitle(title);
      }}>Edit</button>

      <div className="list">
        <h4>{title[0]} <span onClick={() => { changeLike(like + 1) }}>❤</span> {like} </h4>
        <p>4월 26일</p>
      </div>
      <div className="list">
        <h4>{title[1]}</h4>
        <p>4월 26일</p>
      </div>
      <div className="list">
        <h4>{title[2]}</h4>
        <p>4월 26일</p>
      </div>
    </div>
  );
}

export default App;

 

React 에서 useState의 값 변경 원리는 상태를 변경해 주는 함수이다.

위의 코드대로 state에서 선언된 title이 참조하는 값은 값이 바뀌어도 title이 그대로 참조를 해서 값이 변경되어도 state가 인식하는것은 title이 가리키는 참조변수가 변경되지 않았기 때문에 html에서 값이 변경되지 않는다.

      <button onClick={() => {
        let copy = title;
        copy[0] = 'New Title1';
        // copy변수가 title의 값을 그대로 가져와서 수정을 해도 
        // 참조되는 위치는 같기때문에 변경이안된다.
        
        console.log("title: "+ title);	// title: New Title1,Title2,Title3
        console.log("copy: "+ copy);	// title: New Title1,Title2,Title3
        
        // 참조하는 위치가 같기때문에 copy와 title이 같다.
        console.log(copy === title);	// true
        setTitle(copy);
      }}>Edit</button>

title의 참조위치와 copy의 참조위치가 같아서 React의 state는 상태가 같게 인식이되어 배열의 값이 변경되어도 변경되지 않았음으로 인식해 html에서 변경이 되지 않는다.

즉 state는 reference data type (참조타입)의 주소가 변경되어야 변경되었다고 인식한다.

 

 

 

반응형

 

 

 

React에서 useState값을 변경해주기 위해선 spread문법을 사용하거나 깊은복사를 사용하여 참조되는 주소값을 변경해주면 값이 변경된다.

      <button onClick={() => {
        let copy = [...title];	// spread 문법으로 깊은복사를 했다.
        copy[0] = 'New Title1';
        
        console.log(title);	// title: Title1,Title2,Title3
        console.log(copy);	// copy: New Title1,Title2,Title3
        console.log(copy === title);	// false
        setTitle(copy);
      }}>Edit</button>

 

깊은복사를 하면 각각의 변수가 새로운 참조주소를 가리켜서 값이 변경되어도 원본은 그대로 남길 수 있다.