[React] useState3. array/object로 저장된 state, 변경했는데 왜 적용 안됨?

# 결론만 말하면.. 

- let array카피본 = [...원본어레이] 형태로 대입해준 뒤 수정해야한다.

// 1. 어레이카피본에는 주소값만 저장되는 꼴. 재랜더링 되지 않는다.
let 어레이카피본 = 원본어레이;

// 2. ...은 원본어레이의 값을 그냥 꺼내주는 키워드인데,
// 원본어레이 값을 펼쳐서 재정의 해준거라 생각하면 됨
let 어레이카피본 = [...원본어레이]

... 이 뭔지 궁금하다면 아래 글 참조

https://isfpp.tistory.com/129

 

# array, object

- 일단 재랜더링 되지 않을땐 js의 문제

- js 에서 array랑 object는 변수를 저장할때, 우항에 있는 값이 바로 저장하는게 아니라,

우항의 있는 값이 저장된 메모리 주소가 저장되고, 그 값은 그 주소안에 메모리에 저장이 된다.

 

* 자세한 설명은 아래 포스팅을 참고하세요.

https://isfpp.tistory.com/132

 

# 예제

- 버튼 클릭시, 첫번째 게시판의 제목이 바뀌는 코드를 예시로 들어보자. 

 

- array의 경우, 카피본을 저장할때, 주소값만 저장되지 않도록 유의해야한다! 

// 1. boardListCopy에는 주소값이 정의되는 꼴. 재랜더링 되지 않는다.
let boardListCopy = boardList;

// 2. ...은 boardList의 값을 그냥 꺼내주는 키워드인데,
// boardList의 값을 펼쳐서 재정의 해준거라 생각하면 됨
let boardListCopy = [...boardList];

 

* 코드

import React from 'react';

// 1. useState import

import {useState} from 'react';

export function App(props) {

  // 2. 게시글 타이틀 배열에 저장

  let [boardList, setBoardList] = useState(['버터감자 엄청 맛있어', '일의 기쁨과 슬픔 독후감', '포지타노 여행기'])

  return (

    <div className='App'>

    {/* 3. onClick을 boardList 재정의 이벤트 달아주기 */}

      <button type="button"

      onClick={

        ()=> {

          // state가 array일땐 독립적 카피본을 만들어야 재랜더링 가능

          let boardListCopy = [...boardList];

          boardListCopy[0] = '떡볶이 엄청 맛있어로 바꾸기';

          setBoardList(boardListCopy)

          console.log(boardListCopy);

        }

      }>

      리스트 첫번째 제목을 "떡볶이 엄청 맛있어로 바꾸기" 버튼

      </button>

     <ul>

      <li>

        {boardList[0]}

      </li>

      <li>

        {boardList[1]}

      </li>

      <li>

        {boardList[2]}

      </li>

     </ul>

    </div>

  );

}

 

*결과

떡볶이 엄청 맛있어로 잘 바뀜

* 테스트 해보기

https://playcode.io/1529896