버니톡 프로젝트 리팩토링(게시글 업로드 창에서 불필요한 api 호출 없애기)

게시글 업로드 컴포넌트인데 계속 게시글 목록을 주기적으로 불러오고 있는 것을 발견했다.
왜 이런 문제가 발생했는지 생각했는데, 결론적으로 게시글 업로드 페이지를 별도로 만든게 아닌, 게시글 업로드 컴포넌트를 만들어 게시글 내용출력 컴포넌트와 조건부 렌더링이 되도록 했던 것이 문제였다.
처음부터 게시글 업로드 페이지를 만들었으면 이런 문제는 없었을텐데 실수다...
const [showSendBox, setShowSendBox] = useState(false);
현재 게시글 업로드 버튼을 누르면 showSendBox의 상태가 true로 바뀌며 게시글 목록 컴포넌트 대신 게시글 업로드 페이지를 불러오도록 구현해두었다.
이걸 이용해 showSendBox가 true일 경우 api 호출을 중단하도록 구현하려고 한다.

//MainHomeContent.tsx
//상단 코드 생략
import useMainHomePost from '../../hooks/useMainHomePost';

const MainHomeContent = () => {
	const location = useLocation();
	const [showSendBox, setShowSendBox] = useState(false);
	const mainHomePost = useMainHomePost(location.pathname, !showSendBox);
	const { posts, lastPostElementRef } = mainHomePost;

	const handleAddContentClick = () => {
		setShowSendBox(true);
	};

	const handleBackClick = () => {
		Swal.fire(
			alertList.doubleCheckMessage('게시글 작성을 취소하시겠습니까?'),
		).then((result) => {
			if (result.isConfirmed) {
				setShowSendBox(false);
			}
		});
	};
//이하 코드 생략

const mainHomePost = useMainHomePost(location.pathname);
기존 api 호출 커스텀 훅에 !showSendBox를 추가해주어 showSendBox가 true일 경우 false를 전달했다.

//useMainHomePost.ts
//상단 코드 생략
const useMainHomePost = (pathname: string, shouldLoad: boolean) => {
	const API_ENDPOINT = pathname.includes('secret')
		? API_MAINHOME_SECRET
		: API_MAINHOME_FRIENDS;

	const getKey = (pageIndex: number, previousPageData: Post[] | null) => {
		if (!shouldLoad) return null;
		if (previousPageData && !previousPageData.length) return null;
		return `${process.env.REACT_APP_API_URL}${API_ENDPOINT}?page=${
			pageIndex + 1
		}&limit=${PAGE_SIZE}`;
	};
//이하 코드 생략

api 호출 커스텀 훅의 const useMainHomePost = (pathname: string) =>
에 인자로 shouldLoad: boolean를 추가해주고 만약 shouldLoad가 false일 경우 게시글 로딩을 하지 않도록 했다.

//MainHomeSendBox.tsx
	const { createPost, newPostContent, setNewPostContent } = useMainHomePost(
		location.pathname,
		false,
	);
    
//MainHomeInnerContent.tsx
const {
		editingPostId,
		setEditingPostId,
		updatedContent,
		setUpdatedContent,
		moveToChatPage,
		updatePost,
		deletePost,
		sendReport,
	} = useMainHomePost(location.pathname, true);

그리고 MainHomeSendBox와 MainHomeInnerContent에서 api 호출 훅에 boolean값을 인자로 보내줌으로서 조건부로 api 호출이 가능하도록 작성해주었다.
게시글 작성 컴포넌트에서는 false를 보내 게시글 호출을 막았고, 게시글 목록 출력 컴포넌트에서는 true를 설정해 호출이 가능하게 했다.

결과물. 게시글 작성 버튼을 눌러도 더이상 추가 api 호출을 하지 않는다.

처음부터 게시글 작성 페이지를 따로 만들었으면 이런 문제가 발생하지 않았을 거고, 불필요한 코드 작성도 없었을 것이다.
추가적인 페이지를 만들지 않고싶어서 하위 컴포넌트로 분리해버렸는데, 오히려 코드의 복잡성을 증가 시킨 것 같아서, 다음에는 페이지를 만드는 데에 있어 좀 더 신중할 필요가 있을 것 같다.