15.11.1 수정 기능 구현하기

수정 기능부터 먼저 완성해봅시다. 게시글 화면에서 수정을 누르면 기존 제목과 내용을 WriteScreen에서 초깃값으로 사용해야겠지요? 해당 부분은 queryClient를 사용하여 구현하겠습니다.

WriteScreen에서 내비게이션 파라미터를 읽고, id 파라미터가 존재하면 queryClient로 해당 게시글 데이터를 읽어서 제목과 내용의 초깃값으로 사용하도록 구현해보세요.

screens/WriteScreen.tsx

(...)
import React, {useCallback, useEffect, useMemo, useState} from 'react';
import {RouteProp, useNavigation, useRoute} from '@react-navigation/core';
import {RootStackNavigationProp, RootStackParamList} from './types';

type WriteScreenRouteProp = RouteProp<RootStackParamList, 'Write'>;

function WriteScreen() {
  const {params} = useRoute<WriteScreenRouteProp>();
  const queryClient = useQueryClient();
  // params.id가 존재한다면 queryClient를 통해 캐시 조회
  const cachedArticle = useMemo(
    () =>
      params.articleId
        ? queryClient.getQueryData<Article>(['article', params.articleId])
        : null,
    [queryClient, params.articleId],
  );
  const {top} = useSafeAreaInsets();
  // 캐시된 데이터가 존재한다면 해당 데이터 정보를 초깃값으로 사용
  const [title, setTitle] = useState(cachedArticle?.title ?? '');
  const [body, setBody] = useState(cachedArticle?.body ?? '');

(...)

이제 수정 버튼을 눌렀을 때 기존 게시글의 정보가 제목과 내용에 나타나는지 확인해보세요.