React : useState에서 객체와 배열을 다뤄보자

React의 useState 함수의 경우 값이 변경되면 재렌더링을 해준다. 참조형의 경우에는 참조하는 주소(메모리주소)가 변경 되었을 때 값이 변경되었다고 인식하기 때문에 값을 변경한다고 해서 렌더링이 발생하지 않는다. 

 

아래의 로직을 시행했을 때 참조하는 주소가 변경되지 않았기 때문에 버튼을 눌렀을 때 값이 변경되지 않는다.

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

function App() {
  const [obj, setObj] = useState({
    name: "코딩쥐",
    addr: "coding-ji.tistory.com"
  })

  function changeName(){
    obj.name = "coding-ji"
    obj.addr = "tistory.com"
    setObj(obj);
  }
  return (
    <>
      <h2> 이름 : {obj.name} </h2>
      <h2> 주소 : {obj.addr}</h2>
      <button onClick={changeName}>변경</button>
    </>
  )
}
export default App

 

useState()에서 객체 / 배열 사용

객체의 형태는 유지하고 참조하는 주소만 변경하고 싶다면 구조분해할당을 사용하면 된다. spread 연산자를 사용하여 객체/배열을 해체해서 그 값을 새로운 객체/배열로 전달 받게 되면 참조하는 주소가 변경하게 된다. 이후에 값을 수정하여 set함수를 통하여 객체/배열의 값을 할당한다. 

 

<< 객체 >>

버튼을 클릭했을 때 이름과 주소가 changeName(){}에 들어있는 값으로 변경된다.

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

function App() {
  const [obj, setObj] = useState({
    name: "코딩쥐",
    addr: "coding-ji.tistory.com"
  })

  function changeName(){
    setObj({
      ...obj, 
      name: "coding-ji",
      addr: "blog.naver.com/coding-ji"
    })
  }
  return (
    <>
      <h2> 이름 : {obj.name} </h2>
      <h2> 주소 : {obj.addr}</h2>
      <button onClick={changeName}>변경</button>
    </>
  )
}
export default App

<< 배열 >>

추가 버튼을 누르면 addFood()의 함수에서 setFood를 통해서 배열의 값이 추가되는 것을 볼 수 있다. 

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

function App() {
  const [food, setFood] = useState(["피자 "])

  function addFood() {
    setFood([
      ...food,
      ["햄버거 ", "샌드위치"]
    ]
    )
  }
  return (
    <>
      <h2> 좋아하는 음식 : {food}  </h2>
      <button onClick={addFood}>추가</button>
    </>
  )
}
export default App