React useState

state 변경함수 동작원리

state 변경함수 사용시 먼저 (원래state === 새로운state) 검사를 한다
위 내용이 같으면 state를 변경하지 않는다.

js에서 array,Object자료를 만들면 (ex) let arr = [1, 2, 3]을 만들었을 때 [1, 2, 3]은 램 가상공간에 저장이 되고
let arr변수에는 자료가 어디있는지 가리키는 화살표 함수가 담겨있다.

그래서 array,object자료를 복사하게 되면

let data1 = [1,2,3];
let data2 = data1;

data1, 2는 `[1,2,3]'을 각각 별도로 저장하는 것이 아닌 똑같은 위치를 가리키는 화살표함수가 공유되므로 data1의 값을 바꾸면 자동으로 data2의 값도 바뀌게된다.

위의 이유로 인해서 같은 화살표를 가리키는 변수는 등호로 비교해도 똑같이 나온다.

때문에 spread operator문법을 사용해서 array나 object자료형 왼쪽에 붙여 괄호를 벗겨서 복사해 사용한다.

let data1 = [1,2,3];
let data2 = [...data1];
console.log(data1 === data2)	// false

위 코드처럼 복사해서 state를 사용해야 그 값이 의도한대로 바뀐다.
이런 독립적인 사본을 shallow copy, deep copy라고한다.

let [state, setState] = useState( [] )
let copy = [...state];
copy 변경
setState(copy);

위와 같은 형식으로 state를 변경하면 된다.