글수정 버튼 만들기
function App(){
let [글제목, 글제목변경] = useState( ['여자 코트 추천', '남자 코트 추천', '아동 코트 추천'] );
return (
<button onClick={ ()=>{ ??? } }> 글제목수정 </button>
)
}-> 글제목수정 버튼을 누르면 첫 글이 '중년 코트 추천' 으로 수정되는 기능 만들기
전 시간에 배웠던 내용대로 한다면 물음표 안에 ['중년 코트 추천', '남자 코트 추천', '아동 코트 추천'] 를 넣으면 된다
확장성 있게 수정해보기
만약 [] 안에 글이 100개 들어있다면 onClick 안의 코드가 매우 길어지기 때문에
기존 state를 복붙하는 것이 아닌 첫 글만 살짝 바꿔서 state 변경함수에 집어넣기로 개발해보기
function App(){
let [글제목, 글제목변경] = useState( ['여자 코트 추천', '남자 코트 추천', '아동 코트 추천'] );
return (
<button onClick={ ()=>{
글제목[0] = '중년코트 추천';
글제목변경(글제목)
} }> 수정버튼 </button>
)
}-> 이렇게 해도 되지만 더 좋은 방법이 있다
function App(){
let [글제목, 글제목변경] = useState( ['여자 코트 추천', '남자 코트 추천', '아동 코트 추천'] );
return (
<button onClick={ ()=>{
let copy = 글제목;
copy[0] = '여자코트 추천';
글제목변경(copy)
} }> 수정버튼 </button>
)
}array, object 자료를 다룰 때에는 원본 데이터를 직접 조작하는 것보다 기존 값은 보존하는 식으로 코드를 짜는 것이 좋다
(바뀌기 전의 원본을 필요로 할 때가 있기 때문이다)
그래서 let copy 같은 변수에 기존array를 복사하고 조작하는 식으로 코드를 짜면 더 안전하다
let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );
return (
<button onClick={ ()=>{
let copy = [...글제목];
copy[0] = '여자코트 추천';
글제목변경(copy)
} }> 수정버튼 </button>
)
}-> 전 코드는 동작이 안되고 이렇게 let copy = [...글제목] 이라고 써야 작동을 한다
state 변경함수 동작원리
state 변경함수를 쓸 때 기존 state === 신규 state 이렇게 먼저 검사를 하고 같으면 state변경을 해주지 않는다
그래서 글제목변경(copy)를 해도 copy 라는 변수가 기존state와 같아서 변경을 하지 않았던 것이다
Q. copy라는 변수랑 기존 state랑 안에 있는 자료가 같지 않나?
기존 state는 '여자 코트 추천' copy 에는 '중년 코트 추천' 이 들어있지만
기존 state === copy 를 비교해보면 같다고 뜬다
array/object 동작원리
-
예를들어 let arr = [1,2,3] 이렇게 만들면
[1,2,3] 이라는 자료는 램이라는 가상공간에 몰래 저장이 되고
let arr변수엔 그 자료가 어디있는지 가리키는 화살표만 담겨있다 -
그래서 array/object 자료를 복사하면 이상한 일이 일어나는데
let data1 = [1,2,3];
let data2 = data1; //복사문법이렇게 하고 data2를 출력해보면 [1,2,3]이 잘 나온다
하지만 data1과 data2는 각각 [1,2,3]을 별개로 저장하는게 아니라 data1과 data2 똑같은 값을 공유한다
이유는!! 변수에 화살표만 저장되기 때문이다
우리가 복사한건 화살표를 복사한 것이기 때문에 data1, data2는 똑같은 화살표를 가지게 된다 (같은 자료를 가리킴)
- 같은 화살표를 가지고 있는 변수끼리는 등호로 비교해도 똑같다고 나온다
let data1 = [1,2,3];
let data2 = data1; //복사
data2[0] = 1000; //data2 내부 변경
console.log(data2 === data1)-> true 출력
위로 돌아가서 ``` let copy = 글제목; copy[0] = '여자코트 추천'; 글제목변경(copy) ``` 이렇게 하면 컴퓨터는 copy 와 기본의 글제목을 똑같다고 생각하기 때문에 (화살표가 같음) state 변경을 안해주는 것이다
let copy = [...글제목];
copy[0] = '여자코트 추천';
글제목변경(copy)이렇게 하면 동작이 잘 된다
점 3개는 무엇인가?
spread operator 이라는 문법인데
array나 object 자료형 왼쪽에 붙일 수 있고 뜻은 괄호를 까주세요~ 라는 뜻이다
...[1,2,3] 이렇게 쓰면 그 자리에 1,2,3 이 남는다
두번째 용도는 array나 object 자료형을 복사할 때 사용한다
let data1 = [1,2,3];
let data2 = [...data1];-> data1에 있던 자료들을 괄호를 벗기고 다시 array로 만들어주세요~
이렇게 하면 화살표가 다른 완전 독립적인 array 복사본을 생성할 수 있다
