1. 프론트 구성.

게시글의 내용을 조회하는 기능은 게시글 목록 컴포넌트에서 글의 id값을 url의 param으로 넘겨주는 것을 바탕으로 시작한다.

const { id } = useParams();

페이지가 처음 렌더링 되면, 이 id값을 인자로 게시글의 내용을 조회하는 함수를 호출한다. 데이터가 정상적으로 반환되어 오면 컴포넌트는 리렌더링되어 글의 내용을 출력하게 된다.

	const { getDocument, deleteDocument, downloadFile, response } = useFirestore('questions');

    useEffect(() => {
      const titleElement = document.getElementsByTagName('title')[0];
      titleElement.innerHTML = '공부기록';
      getDocument(id);
      getComments(id);

    // eslint-disable-next-line
}, []);

글의 내용을 수정하는 것과, 삭제하는 것도 글을 조회하는 기능과 마찬가지로 넘겨받은 id param를 바탕으로 이루어 진다.

const onUpdate = () => {
    navigate(`/texteditor/qs/${id}`);
};

const onDelete = () => {
    deleteDocument(id, 'qs');
};

2. 기능 구성.

const getDocument = async (docid) => {
    dispatch({ type: 'isPending' });
    try {
        const docRef = doc(colRef, docid);
        const docSnap = await getDoc(docRef);
        dispatch({ type: 'getDoc', payload: docSnap.data() });
    }
    catch (error) {
        dispatch({ type: 'error', payload: error.message });
        alert(error.message);
    }
};

게시글 조회 기능은 목록 조회와 달리 단 하나의 데이터 문서를 가져오면 된다. getDoc 함수를 사용하고, 데이터가 하나뿐이므로 배열의 형태도 아니고 map 함수를 사용할 필요도 없다. 게시글 삭제 기능은 deleteDoc 함수를 사용하기만 하면 된다.

• 삭제 기능 구현 시 주의점.
  DB에서 데이터를 완전히 지워버리는 것은 어려운 일이 아니다. 그런데 기존에 존재하던 데이터를 아예 삭제할 경우, 해당 index가 공백이 되어버리고 이로 인해서 에러가 발생할 수도 있다. 결국 삭제 이후 나머지 데이터의 index를 모두 수정해주어야 하는데, 이렇게 하는 것보다는 차라리 데이터 필드에 삭제여부를 표시하는 수단을 하나 추가하여 구분이 가능하게 만들어주는게 더 좋을 수도 있다.