크게 두 가지 컴포넌트와 연결이 되어 있었는데, 저장해 놓은 데이터를 불러와서 캔버스 및 코드 데이터를 수정할 수 있는 셀프 스터디 룸 컴포넌트와 메타데이터 정보를 수정하고 DB에 저장하는 업데이트 모달 컴포넌트가 있었다.

기존 스터디 룸에서 새로 만든 data를 저장하는 컴포넌트를 그냥 가져와서 쓰면 되는 것 아닌가 싶었다.

기존 수정하려고 하는 데이터를 어떤 식으로 불러올 것인가가 문제가 되었다.

기존 수정하려고 하는 데이터를 어떤 식으로 불러올 것인가

처음에는 그냥 새로 GET 요청을 보내 새로운 STATE에 Response 데이터를 저장한 후 사용하려 했었다. 이런 식으로 접근하니 문제점이 생겼다.

• GET 요청으로 받아온 데이터를 STATE에 업데이트 되는 과정이 비동기적으로 일어나면서, 데이터가 다 받아오지 않은 상태에서 업데이트 컴포넌트가 렌더링되었다.
  • 데이터가 없는 상태에서 해당 데이터를 저장하려 하니 오류가 났다.
  • 따라서 데이터를 GET 요청으로 받아오지 않고 상위 컴포넌트인 셀프 스터디 룸 컴포넌트에서 GET으로 서버에 요청한 데이터를 Prop으로 가지고 와서 사용했다.
• GET 요청도 비동기적인 작업이다 보니, prop으로 data를 넘겨주어 그 데이터를 저장할 때 따로 데이터를 받지 않은 상태에서 컴포넌트가 렌더링되었다.
  • 저장 화면을 포함한 UpdateStudy 컴포넌트가 렌더링되는 과정에서 GET 요청의 response로 받은 data를 받았을 때에만 렌더링되도록 바꾸었다.

시행착오?

useCallback이나 useMemo