파크로그

Client State, Server State

며칠 전 우아한 테크세미나에서 진행한 React Query 발표영상을 보면서 Server State 와 Client State 의 구분에 대한 느낌을 잘 받았다. 두리뭉실하게 전역상태 라고 사용하던 것을 명확히 구분지어 사용할 기준이 생겼다.

그런데 React Query 로 이것 저것 만들어 보다보니, Server State 의 데이터를 Action 을 통해 Client State 에 저장해야 하는 상황도 존재하겠다는 생각이 들었다.

발표하신 내용의 질문으로도 나온 주제였는데, 그때 당시에는 질문의 상황을 제대로 인지하지 못하여 와닿지 않았었다.

그런데 만약 Server 로 부터 데이터를 전달받아, 어플리케이션은 데이터로부터 사용자가 선택한 특정 값 을 기억하고 싶은 상황이 있다면, 해당 상황이 Client State 가 Server State 에 종속적인 상황이지 않을까 란 생각이 들었다.

발표해주신 내용에서 Client State 의 특징으로 초기값 설정이나 조작에 제약사항 없음 을 이야기 해주셨는데, 만약 초기 데이터로 설정하고 싶은 값 이 Server State 로 부터 있다면, Client State 에 저장할 데이터의 형식을 어떻게 해야할 지 고민이다.

Server 에서 넘겨주는 Response 형식 그대로 저장할 것인가? 아니면 unique 한 값 (id) 를 사용할 것인가?, 아니면 Client 에서 필요하다고 판단되는 형식으로 사용할 것인가?

첫 번째 방식은 일단 서버에서 Response 를 받아 저장해야하는 상황이 있을 수 있어 초기값 설정에 제약이 있다고 생각이 들었다. 그리고 두 번째 방식은 id 이외에 다른 값이 필요한 상황도 있을 수 있겠다는 생각이 들었다.

당장엔 마지막 방식이 제일 와닿지만, 조금 더 찾아보고 고민해봐야겠다.

useReducer 의 dispatch 도 setState 처럼 batch update 하는걸까?

테스트 해보았을 땐 렌더링 횟수를 보았을 때 동일하게 동작한다고 생각되어진다. 테스트

최초 1번, 1번째 dispatches 에서 1번, delay 이후 1번 = 3번

 

profile

파크로그

@파크park

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!