Update 한 번 저장하고 나서 다시 들어가 update를 하려 하면 이전의 제목과 태그가 나오는 이슈가 있었다.

현재 저장 창에 뜨는 데이터들은 useState로 초기값은 Priview에서 받아온 메타데이터를 활용해서 보여준다.

const UpdateStudy = ({ isOpen, onCancel, doc, **data** }) => {
  dotenv.config();

  const [**title**, setTitle] = useState(**data**.title);
  const [**announcer**, setAnnouncer] = useState(**data**.announcer);

이미 Preview에서는 메타데이터가 바뀐 값으로 잘 보여지는데 왜 안에 들어가면 달라지지 않지?

state들이 모두 업데이트 되기 이전의 값으로 보여지고 있었다.

상위 컴포넌트 SelfStudyRoom가 맨 처음 렌더링될 때 미리 UpdateStudy도 렌더링 시키면서 파일의 메타데이터를 props으로 넘겨준다. UpdateStudy에서 데이터를 변화시키고 다시 상위 컴포넌트로 이동하면서 렌더링 될 때 updateStudy도 같이 렌더링되는데, 이 때 prop으로 받은 데이터는 아직 변경되지 않은 이전 데이터를 받게 되고, 렌더링되면서 과거의 값이 들어가게 된다. 그 후 다시 update study로 이동하는 과정에서 데이터는 업데이트 되지만, prop으로 넘겨준 데이터는 업데이트가 되기 전이기 때문에 변화된 값이 업데이트되지 않고 그냥 변경되기 전의 값으로 유지된다.

따라서 상위 컴포넌트가 렌더링될 때 동시에 update study를 렌더링 시키는 게 아닌, update 버튼을 눌렀을 때 업데이트 되도록 만들어줌으로써 변경된 데이터를 제대로 prop으로 받아 사용할 수 있도록 만들어 주었다.