React는 상태를 직접 고치지 않고 새 값을 setState로 넘겨야 다시 그린다. 이전 값과 Object.is로 비교하므로, 같은 객체를 고친 뒤 넘기면 바뀐 줄 모른다.
user.name = '새 이름'
setUser(user) // 같은 객체 → 다시 그리지 않음
setUser({ ...user, name: '새 이름' }) // 새 객체 → 다시 그림- JPA(Java Persistence API) 더티 체킹(Dirty Checking)은 정반대다. 같은 객체를 고치면 프레임워크가 스냅샷과 비교해 찾아낸다
- 그래서 React 습관대로 id가 있는 새 엔티티 객체를 만들어
save()하면, 저장이 아니라 SELECT 후 merge가 일어난다
초기값 함수와 함수형 업데이트
- 초기값 계산이 비싸면 값 대신 함수를 넘긴다.
useState(() => expensive())는 첫 렌더에서만 함수를 실행한다.useState(expensive())라고 쓰면 버려질 값을 매 렌더마다 계산한다 - 이전 값을 바탕으로 갱신할 때는
setCount(c => c + 1)처럼 함수를 넘긴다(함수형 업데이트, Updater Function). 한 이벤트에서 여러 번 갱신하거나 클로저에 오래된 값이 잡혀 있어도 최신 값 기준으로 계산된다 - 상태가 여러 개 엮여 함께 바뀌면 useReducer, 렌더 중 계산할 수 있는 값을 상태로 두고 있다면 Effect가 필요 없는 경우를 본다