[ ]안에 글이 3개 들어있으면
글제목변경(['치마추천', '바지추천', '원피스추천']) 이런 식으로 변경이 가능하지만 만약 100개가 넘는 제품이 있다면 막막..
그러니 기존 state를 다 복붙하지 말고 기존 state 첫 글자만 살짝 바꿔서 state변경함수에 집어넣는 식으로 개발하면 됨.
function App() {
let [글제목, 글제목변경] = useState(['치마추천', '바지추천', '원피스추천']);
return(
<div>
<button onClick = {()=>{
글제목[0] = '셔츠추천';
글제목변경(글제목)
}}>수정버튼</button>
</div>
)
}
array 자료안의 X번째 항목을 변경하고 싶으면 이렇게 하면 됨
array자료[X] = '바꿀값'
변경state(기존state)
근데!!참고로 array/object 다룰 때 원본은 보존하는게 좋음
왜냐하면 원본을 영구적으로 변경시켜버리면 나중에 다시 필요할 때 어떡함,, 다시 되돌리기 힘듦.
function App() {
let [글제목, 글제목변경] = useState(['치마추천', '바지추천', '원피스추천']);
return(
<div>
<button onClick = {()=>{
let copy = 글제목;
copy[0] = '셔츠추천';
글제목변경(글제목)
}}>수정버튼</button>
</div>
)
}
???근데 왜 실행 안됨?
무언가 하나를 놓침. [...글제목]; 이런식으로 해야함
function App() {
let [글제목, 글제목변경] = useState(['치마추천', '바지추천', '원피스추천']);
return(
<div>
<button onClick = {()=>{
let copy = [...글제목];
copy[0] = '셔츠추천';
글제목변경(글제목)
}}>수정버튼</button>
</div>
)
}
원리 설명 :
1. [state변경함수 특징]
글제목변경(copy) 괄호 안에 내용으로 기존 state를 갈아 치워줌. 근데 갈아치워주기 전에 조건 하나를 딱 따져보는데
기존 state랑 신규 state랑 등호를 비교해서 같은 경우 변경을 안해줌
비교해서 똑같으면 굳이? 변경해줄 이유가 없음
let arr = [1,2,3];
js에서 array는 1,2,3을 arr에 집어넣어주세요가 아니라 1,2,3이라는 array를 미지의 공간에 저장해두고 1,2,3이라는 array가 어디에 있는지 화살표만 변수에 저장해두는 느낌.
고로 arr에는 [1,2,3]이라는 array가 어디에 있는지 가르키는 화살표만 딱 저장되어 있음
쉽게 말해 arr에는 [1,2,3]이 들어있는게 아니라 화살표만 들어있음
안되는 이유를 다시 돌아가서 생각 해보면
function App() {
let [글제목, 글제목변경] = useState(['치마추천', '바지추천', '원피스추천']);
return(
<div>
<button onClick = {()=>{
let copy = 글제목;
copy[0] = '셔츠추천';
글제목변경(copy);
}}>수정버튼</button>
</div>
)
}
let copy = 글제목;
에는 글제목이 copy에 들어가 있는데 usestate를 보면 [array] 형태임. 그래서 변수에 저장되어 있던건 화살표 밖에 없음.
그래서 copy에는 글제목에 있던 화살표가 복사된거.. 고로 copy[0] = '셔츠추천'; 를 아무리 수정해도 copy안에 있던 화살표는 안바뀜.
console.log(copy == 글제목);
변수1 & 변수2 화살표가 같으면 변수1==변수2 비교해도 true 나옴. 당연히 변수안에 든 화살표는 똑같으니까
그래서 state 변경도 안되는거임. state는 변경 전에 등호로 비교해 본다 했는데 기존state와 신규state가 화살표가 똑같음. 그래서 state 변경을 안해준 것 뿐임.
이건 화살표를 새로 바꿔주세요,,~ 라는 뜻.
... 는 괄호를 벗겨주세요 그리고 다시 씌워주세요~ 라는 문법임.
이러면 화살표도 달라짐!
이렇게 달라진걸 let copy = [...글제목]; 에서 copy에 넣어준거고 그걸 글제목변경(copy)에 넣어주면 새로운 state구나! 라고 생각을 해서 state 변경을 해주는거임.
state가 array / object면 shallow copy를 만들어서 수정해야 함
let copy = [...글제목]
글제목변경(copy);