공부/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>
|
앞에 [... 를 붙여서 새롭게 정의를 해줘야 한다.
새로운 메모리(?) 공간에 있는 변수를 참조하게 말이다.
그래서 [...글제목] 으로 새로 선언해주면~ 잘 된다.

▲ 결과!!