728x90
반응형
데이터 변경 (클라이언트 컴포넌트)
1) create 하는 화면(클라이언트 컴포넌트)
2) read 하는 화면(서버 컴포넌트)
1. page.js 파일 생성 (변경)
2. page.js 코드 구현 (변경)
(1) create 하는 화면 코드 가져오기
(2) read 하는 화면(서버 컴포넌트) --> read하는 부분을 useEffect로 가져와야함
update > [id] > page.js
'use client';
import { useParams, useRouter } from 'next/navigation'; // 넥스트 13버전 (app router)
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 (
<form
onSubmit={(event) => {
event.preventDefault();
const title = event.target.title.value;
const body = event.target.body.value;
const options = {
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ title, body }), //json타입으로 전환
};
fetch(`http://localhost:9999/topics/` + id, options)
.then((res) => res.json())
.then((result) => {
console.log(result);
const lastid = result.id;
//리디렉션
router.push(`read/${lastid}`);
router.refresh();
});
}}
>
<p>
<input
type="text"
name="title"
placeholder="title"
value={title}
onChange={(e) => setTitle(e.target.value)}
></input>
</p>
<p>
<textarea
name="body"
placeholder="body"
value={body}
onChange={(e) => setBody(e.target.value)}
></textarea>
</p>
<p>
<input type="submit" value="update"></input>
</p>
</form>
);
}
1) useParam 을 사용해서 id 가져오기
2) useEffect를 사용 => fetch 로 데이터 가져옴 (resp)
3) useState를 사용 => 데이터 넣기
4) input에 value값과 onChange 이벤트 설정
5) 버튼 클릭시 form 이벤트에서 메서드는 데이터 변경이니 PATCH 로 변경
6) fetch 할때 경로에 id 값 추가해서 가져오기
[조회 화면]
read > [id] > pages.js
const response = await fetch(`http://localhost:9999/topics/${props.params.id}`, { cache: 'no-store' });
> 캐시 옵션 꺼주기
3. 데이터 삭제
[Control.js]
'use client';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import { useRouter } from 'next/router';
export function Control() {
const params = useParams();
const router = useRouter();
const id = params.id;
return (
<ul>
<li>
<Link href="/create">Create</Link>
</li>
{id ? (
<>
<li>
<Link href={'/update/' + id}>Update</Link>
</li>
<li>
<input
type="button"
value="delete"
onClick={() => {
fetch(`http://localhost:9999/topics/` + id)
.then((res) => res.json())
.then((result) => {
router.push('/');
router.refresh();
});
}}
></input>
</li>
</>
) : null}
</ul>
);
}
1) onClick 이벤트 생성
2) fetch에 url에 id 값 추가해서 들어감
3) 삭제된 후 데이터 없으니 홈화면으로 이동 (router필요 )=> router.push
4) 리프레쉬해주기
끝.
[출처] 생활코딩
데이터 변경 및 삭제
반응형