공부/React

React : state 가 array/object 일 때 데이터 변경하기

딸기버블티 2022. 11. 17. 21:50

 

1
let [글제목,글제목변경] = useState(['가요 인기 순위''화장품 브랜드 순위''패딩 인기 순위']);
 

이런 데이터가 있다고 하면, 

글제목[0] = 가요 인기 순위

글제목[1] = 화장품 브랜드 순위

글제목[2] = 패딩 인기 순위 이다.

 

App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* eslint-disable */
import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';
 
function App() {
 
  let [글제목,글제목변경] = useState(['가요 인기 순위''화장품 브랜드 순위''패딩 인기 순위']); // 글제목='가요 인기 순위', 글제목변경='가요 인기 순위'를 변경하는 함수
  let [좋아요,좋아요변경] = useState(0);
 
  return (
    <div className="App">
     <div className="black-nav">
      <div>개발 Blog</div>
     </div> 
     <div className='list'> 
      <h3>{글제목[0]} <span onClick={ () => {좋아요변경(좋아요+1)}  }>💕</span> {좋아요} </h3>
...생략
 
 

React 에서는 state 를 이용하여 <h3>{글제목[0]}</h3> 이렇게 사용 하면, 

<h3>가요 인기 순위</h3> 이렇게 변경이 되는데,

버튼을 클릭했을 때 가요 인기 순위 글자를 트로트 인기 순위 글자로 변경 해야 할 땐 어떻게 해야 할까 ?

 

array, object 를 이용했을 땐 원본 데이터를 저장하는 것이 좋으므로, 독립적인 변수를 만들어서 기존 데이터를 넣어준다.

1
let copyValue = 글제목;
 

 

이렇게 말이다.

 

 

 

1
2
3
4
5
6
<button onClick={() => {
        let copy = 글제목;
        copy[0= '트로트 인기 순위';
        글제목변경(copy)}
        }>글제목변경
</button>
 

버튼을 클릭했을 때 이렇게 하면 글제목의 0 번째 변수인 '가요 인기 순위' 가 '트로트 인기 순위'로 바뀔 것 같지만!!

 

아무리 눌러도 바뀌지 않는다;

 

 

 

 

 

 

 

 

글제목 -----> ['가요 인기 순위', '화장품 브랜드 순위', ...] 를 가지고 있는것 같지만

state 라는 글제목에는 [ ] 배열이 아닌 -----> 화살표에 대한 정보만 갖고 있다..!!!

 

#그렇다면?

1
2
3
4
5
6
<button onClick={() => {
        let copy = [...글제목];
        copy[0= '트로트 인기 순위';
        글제목변경(copy)}
        }>글제목변경
</button>
 

 

앞에 [... 를 붙여서 새롭게 정의를 해줘야 한다.

새로운 메모리(?) 공간에 있는 변수를 참조하게 말이다.

 

그래서 [...글제목] 으로 새로 선언해주면~ 잘 된다.

▲ 결과!!