[react] 배열 또는 객체형태의 state를 변경하는 법

 

이전에 하나의 내용만을 담고있는 state를 변경하는 방법을 배웠었다.

state 설정 함수에 인자로 넘겨주면 아예 갈아끼워지는 방식이었다!

 

그런데 배열 안에 있는 내용 중 한가지만 변경하고 싶은데, 어떻게 해야할까!?

아주 쉬운 방법으로는 이전 state를 그대로 복붙해서, 원하는 부분만 변경해주면 된다.

   let [listTitle, listTitleSet] = useState(['코트 추천', '가디건 추천', '패딩 추천']);
.
.
.
<li>
  <h5>{listTitle[0]} <span onClick={likeUp}>👍</span> {like}</h5>
  <button onClick={()=>{listTitleSet(['여자 코트 추천', '가디건 추천', '패딩 추천'])}}>글자 변경</button>
  <p>2022-10-02</p>
</li>

 

하지만 지금은 임시로 3개만 넣어놔서 괜찮지만, 데이터가 100개 넘어가고 그러면 아주 비효율적인 방법이 될 것이다.

우리가 이전에 쓰던 배열, 객체에서 내용을 변경하던 방법으로 진행하자

 

그리고 배열, 객체 형태의 state를 사용할 땐, 태초의 원본은 유지하는게 좋다

그래서 글자를 변경할 땐, 아래처럼 복사본을 만들어서 복사본에서 수정을 진행하자!

 <button onClick={()=>{
       let copy = listTitle;
       copy[0] = '여자 코트 추천';
       listTitleSet(copy)
 }}>글자 변경</button>

 

그런데 이렇게 해도 버튼을 눌렀을 때, 변경이 안된다!

왜냐하면 state변경함수가 돌아가는 원리가 따로 있기 때문이당

 

state변경 함수의 특징

기존 state == 신규 state의 경우 변경X

 

array, object의 특징

let arr = [1,2,3] 일 때, [1, 2, 3]은 RAM에 저장이 되고, arr라는 변수에는 [1,2,3]이 어디에있는디 알려주는 화살표만 들어있다.

 

그래서 위에서처럼 copy라는 변수에 state를 저장을 해도 copy라는 변수에는 화살표밖에 담겨있지 않았을거다.. 그래서 copy[0]를 수정해도 변경되지 않았던 것 ㅠㅠ 어우 복잡쓰..

 

listTitle[0] == copy[0] 도 true로 나온다. 왜냐하면 화살표가 같은 화살표이기 때문 ^,^

그래서 기존 state == 신규 state의 경우 변경X 의 특징으로 인해 지금까지는 변경이 안됐다!

 

* 더 원리를 이해하고 싶다면 reference data type을 알아보자! 배열, 객체는 저 타입이기 떄문에 이렇게 작동하는 것임!

 

 

새로운 객체 또는 배열을 만들고 싶다면 ... 을 사용하면 된다

<button onClick={()=>{
  let copy = [...listTitle];
  copy[0] = '여자 코트 추천';
  listTitleSet(copy)
 }}>글자 변경</button>

 

... 이란 이전의 listTitle의 괄호를 벗겨달라는 의미이다. 즉 배열을 해제한다고 생각하면 될 것 같다

그리고 새로운 대괄호로 묶어져있는데, 그 대괄호로 인해서 새로운 배열이 생성됐고,

copy라는 변수에는 새로운 화살표가 담기게 되어 버튼을 누르면 이제 새로운 state로 인식되어 변경이 된다!

 

 

 

오늘 공부 요약

state가 array 또는 object이면! 독립적 복사본(shallow copy / deep copy)을 만들어서 수정해야한다!

독립적 복사본 만드는 법

: let newArr = [...originArr]