코딩애플 리엑트 강의 듣고 혼자서 기록하는 것 입니다.
강의 내용 출처는
https://codingapple.com/course/react-basic/
모든 저작권은 코딩애플에게 있습니다.
array, object state 변경법
function App(){
let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );
return (
<button onClick={ ()=>{ ??? } }> 수정버튼 </button>
)
}수정버튼이 작동되게 하려면 ???부분에
{
글제목변경(['여자코트 추천', '강남 우동맛집', '파이썬 독학'])
}[state이름, state변경함수] 구조이기 때문에
글제목(['여자코트 추천', '강남 우동맛집', '파이썬 독학']) 이렇게 작성하면 변경이 되지 않는다.
글제목변경('여자코트 추천')이렇게 하면은 글제목이라는 state가 '여자코드 추천' 하나로 변경되는데
state변경함수는 () 안에 넣은걸로 기존 state를 변경하여준다.
이 점을 명심해야한다.
그런데 state변경함수의 파라미터 () 내부에 변경되는 사항을 모두 작성하게되면
나중에는 코드가 엄청 길어지고 가독성도 떨어지게 된다.
()안에 "기존 state 전체 + 변경되는 부분" 을 넣는 구조보다.
기존 state에서 변경되는 부분만 살짝 바꿔서 state변경함수에 적용하는 식으로 개발하면 되는데
function App(){
let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );
return (
<button onClick={ ()=>{
글제목[0] = '여자코트 추천';
글제목변경(글제목)
} }> 수정버튼 </button>
)
이런식으로 state array의 [n]번째 항목만 지정하여 변경해주는것이다.
(array자료[N] = '바꿀값')
위의 방식도 좋지만 원본 데이터는 가급적 변경하지 않는 것이 좋다.
원본 데이터를 유지하는 방식으로 state를 변경하려면
function App(){
let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );
return (
<button onClick={ ()=>{
let copy = [...글제목];
copy[0] = '여자코트 추천';
글제목변경(copy)
} }> 수정버튼 </button>
)
}그래서 let copy 변수에 기존 array를 복사해두고
그 복사본을 조작하는 식으로 코드를 작성하는 것이 더 안전하다.
그런데 let copy = [글제목] 이라고 하지 않고
let copy = [...글제목] 이라고 하는 이유는
state 변경함수 작동원리
let arr = [1,2,3]을 선언해도 arr라는 변수에 [1,2,3]을 저장해두는것이 아니라
RAM에 저장해두고 arr는 저장된 곳의 화살표를 가지는 것이다.
(arr에는 [1,2,3]이 존재하지 않는다.)
let data1 = [1,2,3];
let data2 = data1;두 변수 모두 값은 1,2,3이 나오지만 각각 [1,2,3]을 보관하고 있는것이 아니라 화살표만 가지고 있는것인데
즉 똑같은 값을 공유한다.
(위 코드에서 data1을 변경하면 data2도 자동으로 변경된다.)
let copy = 글제목;
copy[0] = '여자코트 추천';
글제목변경(copy)그래서 이렇게 코드를 짜면
컴퓨터는 copy와 기존 글제목 state는 똑같다고 생각하기 때문에 state 변경을 안해준다.
그래서 [...state이름] 이렇게 해주는데 이 ...의 뜻은
spread operator
array나 object 자료형 왼쪽에 붙일 수 있으며
첫 번째 용도는 괄호를 벗겨주세요~ 이다.
let arr = [1,2,3]에서
...arr를 하면 괄호인 []을 제거한 1,2,3만 남는다.
두번째 용도는 array나 object를 복사할 때 많이 사용하는데,
"data1에 있던 자료들을 괄호 벗긴다음 다시 array로 만들어주세요~" 라는 의미이다.
이렇게 새로운 array로 인식하여 화살표가 달라진다.
그래서완전 독립적인 array 복사본을 생성해줄 수 있다.
(기존 array를 변경하여도 복사본은 변경되지 않는다.)
object 자료형도 마찬가지이다.
그리고 독립적인 사본을 shallow copy 아니면 deep copy 라고 한다.
정리
let [state이름, state변경함수] 이다.
-
state변경함수() 에서 state변경함수는 괄호 안의 내용으로 state를 변경하여준다.
-
array/object state를 수정하고 싶으면 독립적인 카피본을 만들어서 수정하자
[...기존state]
{...기존state}
이렇게 하면 독립적인 카피가 하나 생성된다.
