이것이 React 상태가 업데이트되지 않는 이유입니다!

안녕하세요 여러분! 오늘은 제가 React를 처음 배울 때 항상 발견했던 간단한 버그를 공유하고 싶습니다😅. 리렌더링 시 상태가 업데이트되지는 않지만 여기에는 가상 DOM 또는 반응 관련 개념과 관련된 내용이 없습니다. 대신 이것은 VanillaJS에서 코딩할 때 발생할 수 있는 실수입니다‼️

목표

수많은 항목의 목록이 있고 각 항목에는 버튼이 있고 클릭할 때 값이 증가한다고 가정해 보겠습니다.

내 시도

내 상태는 다음과 같습니다.

const [Test, setTest] = useState([
    {
      name: 'Eric',
      value: 0
    },
    {
      name: 'Frank',
      value: 20
    },
    // and more....
  ])

렌더링 부분은 다음과 같습니다.

<div className="App">
      {
        Test.map((item, idx) => (
          <button
          key={idx}
            onClick={(e) => {
              e.preventDefault()
              setTest((value) => {
                value.find(element => element.name === item.name).value += 1
                return value
              })
            }}
          >
            {
              item.name + ': ' + item.value
            }
          </button>
        ))
      }
    </div>

보자...

두 번째 시도 (내가 이 실수를 하는 경우가 90% 😷)

setState의 업데이터를 사용해야 한다는 것을 배웠지만 잘못된 방법으로 사용한 것 같습니다🤒 상태를 직접 변경했습니다. 이전 상태의 새 복사본을 만들어 문제를 해결해 보겠습니다.

//...
    <button
      key={idx}
      onClick={(e) => {
        e.preventDefault()
        setTest((value) => {
          let temp = value
          temp.find(element => element.name === item.name).value += 1
          return temp
        })
      }}
    >
      {
        item.name + ': ' + item.value
      }
    </button>
//...

내 솔루션

작업을 수행하는 코드:

//... 
  setTest((value) => {
    let temp = [...value] 
    temp.find(element => element.name === item.name).value += 1
    return temp
  })
//...

스프레드 연산자 ... 원래 상태를 변경하지 않도록 원래 상태의 복사본을 만드는 데 도움이 되지만 이것은 단지 한 수준의 얕은 복사본이므로 중첩된 개체를 처리할 때는 여전히 권장되지 않습니다.
우리의 경우 상태 배열의 요소는 객체입니다. 즉, 요소가 참조임을 의미하며 요소를 변경하는 것은 여전히 ​​원래 상태를 변경하는 것입니다.
게다가 중첩된 상태는 React 상태의 의도된 용도가 아닙니다. 심하게 중첩된 상태를 만들고 있다면 올바르게 사용하고 있지 않은 것입니다!🦥
당신이 그것에 대해 어떻게 생각하십니까? 더 나은 솔루션을 알고 있습니까? 이 문제를 생각해 냈고 어떻게 해결합니까? 댓글로 알려주세요!🙈 건배!