NextJs 11: next.js글수정 useEffect

안녕하세요, 각성한 데브키라입니다.  웹 애플리케이션 개발 과정에서 사용자의 편의를 위해 글 수정 기능을 추가하는 것은 매우 중요한 과정 중 하나입니다. 이를 위해 구조적인 준비와 코드의 정확한 구현이 필수적입니다. 본 문서에서는 글 수정 기능을 추가하기 위한 폴더 구조 설정과 필수 소스코드 구현에 대해 다루고자 합니다.

1. 글수정을 위해 추가된 구조

"update" 폴더를 생성하고 그 안에 "[id]"라는 이름의 디렉터리를 만들었습니다. 이 "[id]" 디렉터리는 특별한 기능을 가지고 있으며, 사용자로부터 입력 받은 id 파라미터를 "page.js" 파일로 전달하는 역할을 합니다.

폴더구조

2. 글수정 소스코드

입력 필드에 문자를 입력해도 반영되지 않는 문제를 방지하려면, onChange={(e)=>setTitle(e.target.value)} 코드를 반드시 포함시켜야 합니다. 이는 입력 창에 입력한 내용을 반영하기 위해 필요한 onChange 이벤트 핸들러입니다. 따라서, 입력 기능이 정상적으로 동작하도록 하려면 onChange 이벤트를 명시하는 것이 중요합니다.

수정을 할 경우에 메소드는 PUT 또는 PATCH를 사용하면 됩니다. method: 'PATCH'

page.js

"use client"

import {useParams, useRouter} from "next/navigation";
import { useEffect, useState } from "react";

export default function Update() {
    const [title, setTitle] = useState('');
    const [body, setBody] = useState('');
    const router = useRouter();
    const params = useParams();
    const id = params.id;
    useEffect(()=>{
        fetch('http://localhost:9999/topics/'+id)
            .then(resp=>resp.json())
            .then(result=>{
                setTitle(result.title);
                setBody(result.body);
            });
    }, []);

    return (
      <>
        <h2>글수정</h2>
        <form onSubmit={(e)=>{
            e.preventDefault();
            const title = e.target.title.value;
            const body = e.target.body.value;
            const options = {
                method: 'PATCH',//수정을 할때는 PUT 또는 PATCH를 사용하면 됩니다.
                headers: {
                    'Content-Type':'application/json'
                },
                body: JSON.stringify({title, body})
            }
            fetch(`http://localhost:9999/topics/`+id, options)
                .then(res=>res.json())
                .then(result=>{
                    console.log(result);
                    const lastid = result.id;
                    router.push(`/view/${lastid}`);
                    router.refresh();
                })
        }}>
            <p>
                <input type="text" name="title" placeholder="제목" value={title} onChange={(e)=>setTitle(e.target.value)}/>
            </p>
            <p>
            <input type="text" name="body" placeholder="내용" value={body} onChange={(e)=>setBody(e.target.value)}/>
            </p>
            <p>
                <input type="submit" value="입력"/>
            </p>
        </form>
      </>
    );
  }

글수정

글 수정 기능은 사용자가 웹 애플리케이션을 더욱 효과적으로 사용할 수 있게 해주는 중요한 기능 중 하나입니다. 이를 위해 구조적인 준비와 코드 구현의 정확성이 매우 중요합니다. 본 문서에서 소개된 폴더 구조 설정과 소스코드 구현 방법을 통해, 사용자 친화적인 글 수정 기능을 성공적으로 구현할 수 있을 것입니다. 개발 과정에서 이러한 지침들을 참고하여, 사용자가 더 나은 경험을 할 수 있는 웹 애플리케이션을 만드는 데 도움이 되길 바랍니다.

[ NextJs 시리즈 목차 ]

NextJs 01 : NextJs로 시작하는 웹 개발: 설치부터 브라우저 실행까지
NextJs 02: NextJs프로젝트 불필요한 파일제거
NextJs 03: NextJs서버 배포버전 빌드
NextJs 04: Link태그와 태그의 차이점을 이해하고 라우팅 설정까지
NextJs 05: 넥스트Js에서 정적 자원 사용하기
NextJs 06: npx와 json-server 사용하기
NextJs 07: 서버컴포넌트 vs 클라이언트컴포넌트
NextJs 08: Next.js를 활용한 동적 웹 콘텐츠 글보기 화면 실습
NextJs 09: Next.js 글입력 작성과 캐시처리
NextJs 10: 버튼 컴포넌트를 별도 파일로 분리 후 활성 비활성화 처리
NextJs 11: next.js글수정 useEffect
NextJs 12: next.js글삭제 처리 및 CRUD예제 다운로드
NextJs 13: env파일을 활용한 환경변수 설정