인프런 커뮤니티 질문&답변

진성원

작성한 질문수

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

12.18) 배포 준비하기

12.18 새 일기 쓰기 페이지 제목 수정 관련

해결된 질문

작성

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Emotion Diary</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

New.jsx

import Header from "../components/Header";
import Button from "../components/Button";
import Editor from "../components/Editor";
import { useNavigate } from "react-router-dom";
import { useContext, useEffect } from "react";
import {DiaryDispatchContext} from "../App";
import usePageTitle from "../hooks/usePageTitle";

const New=()=>{
    const{onCreate}=useContext(DiaryDispatchContext);
    const nav=useNavigate();
    usePageTitle(`${useParams.id}번 일기 수정`);
    

    const onSubmit=(input)=>{
        onCreate(
            input.createdDate.getTime(),
            input.emotionId,
            input.content
        );
        nav('/',{replace: true});
    };

    return (
    <div>
        <Header title={"write new diary"}
        leftChild={<Button 
            onClick={()=>nav(-1)}
            text={"< back"}/>}
        />
        <Editor onSubmit={onSubmit}/>
    </div>
    );
};

export default New;

usePageTitle.jsx

import { useEffect } from "react";
const usePageTitle=(title)=>{
    useEffect(()=>{
        const $title=document.getElementByTagName("title")[0];
        $title.innerText=title;
    },[title]);
};

export default usePageTitle;

이전 과정까지는 문제없었는데 12.18에 있는 새일기 쓰기 페이지에 들어왔을 때 페이지에 아무것도 뜨지 않는 문제가 발생하는데 어떤게 문제일까요

javascript react node.js

답변 2

이정환 Winterlood

지식공유자

안녕하세요 이정환입니다.

AI 인턴의 답변대로 getElementByTagName가 아닌 getElementsByTagName 으로 사용하셔야 합니다

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 진성원님께서 언급하신 문제는 페이지에 아무것도 나타나지 않는 현상으로, 주로 컨텍스트 또는 컴포넌트 내에서 발생하는 논리 오류나 렌더링 오류 때문일 수 있습니다. 몇 가지 점검사항과 개선사항을 제시해 드리겠습니다.

문제 원인 및 해결방법

Custom Hook에서의 오타:
- usePageTitle에서 document.getElementByTagName이 아닌 document.getElementsByTagName를 사용해야 합니다. 브라우저는 getElementByTagName라는 메서드를 인식하지 못합니다.

   const usePageTitle = (title) => {
       useEffect(() => {
           const $title = document.getElementsByTagName("title")[0];
           $title.innerText = title;
       }, [title]);
   };

useParams 사용 오류:
- useParams.id를 그대로 사용하면 안 되는 상황입니다. New 컴포넌트에서 id는 실제로 사용되지 않으며, 새로운 일기를 작성할 때에는 useParams를 사용할 일이 없습니다. usePageTitle에 넘기는 인자 값을 다시 확인하세요.
컴포넌트 구조 확인:
- New 컴포넌트에서 <Editor />를 사용할 때 onSubmit 메서드를 매핑하셨지만, Editor 컴포넌트 내에서 initData나 다른 필요한 prop이 없는지 확인해보세요.
콘솔 오류 메시지:
- 개발자 도구의 콘솔에서 오류 메시지를 확인하고, 제공한 코드 외 다른 부분에서 문제가 발생하지 않았는지 점검하세요.
Context 및 Router 확인:
- DiaryDispatchContext와 Router 설정이 올바른지 재검토하시고, onCreate 함수가 제대로 정의되고 있는지 확인하세요.

유사한 문제 해결을 위한 참고 링크

React에서 useEffect 사용 시의 주의사항: useEffect 사용시 주의사항을 설명하는 콘텐츠입니다.
리액트에서 Custom Hook 사용 사례: Custom Hook을 사용하여 페이지 타이틀을 설정하는 데 도움이 될 수 있는 유사한 문제의 해결 사례입니다.

위의 방법들을 적용하며 코드를 개선하시면 문제 해결에 도움이 될 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

진성원

질문자

해결되었습니다!

진성원

작성한 질문수

전체 Q&A

질문하기