TIL 6/19 useState set

useState를 사용하면서 set함수를 각 컴포넌트에 전달하는 식으로 구조를 짰다.

 

하지만 이런 구조에서 문제점은 state변경이 각 컴포넌트에서 모두 가능하기 때문에 에러가 발생했을 때 어디서 발생했는지 찾기가 어렵다.

 

그랬기에 State변경 함수를 만들어 각 컴포넌트로 전달하는 구조로 리팩토링했다.

 

그런데 함수내에서 set을 이용해 state를 변경하고 그 state를 localStrorage에 저장하는데 빈 값이 저장되는 문제가 발생했다.

 

setState의 작동 방식을 알고나서 해결할 수 있었다.

 

setState함수는 비동기 방식으로 작동하며 함수 내에서 작동시 리턴되는 값을 기존 값과 비교해 변경사항이 있을 시 렌더링 시키는 방식이었다.(배치 업데이트)

 

그래서 localStorage에는 아직 변경되지 않은 state(빈 배열)이 저장됐었다.

 

그래서 localStorage에 기존 State와 더불어 새로 들어오는 값이 저장된 객체를 같이 넣어줬다.