React array, object state 변경하는 법

array, object state 변경하기

state를 변경할때 array를 변경하면

 

state변경함수(새로운 state)

let [좋아요, 좋아요변경] = useState(0);
좋아요변경(좋아요 + 1);

 

이런식으로 바꾸면 됬지만 array, object의 경우

 

let [글제목, 음식변경] = useState([
"바지락 칼국수 먹고 싶다",
"대창 먹고 싶다",
"초콜릿 먹고 싶다",
]);
  
음식변경(["비빔밥 먹고 싶다", "대창 먹고 싶다", "초콜릿 먹고 싶다"]);

 

식으로 변경해주어야 함

 

이유는 state변경함수는 ( )안에 넣은 걸로 기존 state를 변경해주기 때문

위에 예시처럼 인덱스 0번만 바꾸고 싶지만 기존의 내용이 다 없어지기 때문에 바꾸는 부분과 바꾸지 않는 부분을 다 명시해 주어야 함

 

그래서 array  자료안의 n번째 항목을 변경하고 싶다면

array자료[X] = '바꿀값' 이렇게 하면 됨

 

글제목[0] = '비빔밥 먹고 싶다';
음식변경(글제목)

 

자료를 바꾼 후 state변경함수에 집어 넣는 것

 

하지만 이렇게 되면 원본데이터를 직접 조작하는 것이 되기 때문에 더 나은 방법으로 변경하려면

 

let copy = [...글제목];
copy[0] = '비빔밥 먹고 싶다';
음식변경(copy)

 

array, object 자료를 다룰 때는 원본 데이터를 직접 조작하는 것 보다는 기존값은 보존하는 식으로 코드짜는게 좋음

원본을 바꿔버렸을 때 후에 원본이 필요해질 수도 있기 때문

그래서 let copy 같은 변수에다가 기존 array를 복사해놓고 그걸 조작하는 식으로 코드짜면 조금 더 안전

 

state 변경함수 동작원리

//let copy = 글제목;	//예시 1번, 동작안됨
//copy[0] = '비빔밥 먹고 싶다';
//음식변경(copy)

let copy = [...글제목];	//예시 2번, 동작됨
copy[0] = '비빔밥 먹고 싶다';
음식변경(copy)

 

주의해야하는 점은 state 변경함수를 쓸 때 기존state === 신규state 이렇게 먼저 검사해봄

그래서 같으면 state 변경을 해주지 않음

위 코드에서도 음식변경(copy) 해도 copy라는 변수가 기존state와 같아서 변경을 안해준 것

 

여기서 중요한 점은 copy라는 변수랑 기존 state랑 안에 있는 자료가 다른데 왜 같다고 컴퓨터는 생각하는것인가

이유는 기존state === copy로 비교해보면 같다고 나옴

 

자바스크립트는 array/object 자료를 하나 만들면 자료는 램이라는 가상공간에 저장이 되고

let arr 변수엔 그 자료가 어디있는지 가리키는 화살표만 담겨있음(즉 주소만 가리키는 것)

그래서 array/object 자료를 복사하면 원본과 복사본이 같은 가상공간을 가리킴

복사본을 변경해도 원본이 같이 변경되고 원본을 변경해도 복사본이 같이 변경됨

 

그래서 위에 예시 1번 코드는 컴퓨터는 copy와 기존 글제목 state는 똑같다고 생각하기 때문에(같은 램 공간을 가리켜서) state 변경을 안해줌

예시 2번코드의 ...을 이용하면 다른 램공간에 데이터 내용을 복사해 오기 때문에 copy와 기존 state를 다르게 생각하기 때문에 ...으로 복사해서 사용하는 것

 

...에 대해서

...은 spread operator라고하는 문법

array나 object 자료형 왼쪽에 붙일 수 있으며 괄호를 벗겨주세요라는 뜻

 

1. 괄호 벗기기용 연산자
2. array나 object 자료형을 복사할 때 사용(★)
3.  

자료들을 괄호 벗긴담에 다시 array로 만들면 램 공간을 가리키는 주소(화살표가 가리키는 위치)가 달라짐

 → 새로운 array로 인식

 

...을 사용하여 다시 array를 만들면 화살표가 다른 완전 독립적인 array 복사본을 생성해줄 수 있는 것

object 자료형도 마찬가지임 이런 독립적인 사본을 shallow copy 아니면 deep copy 라고 함