728x90
반응형
update하기 위해서는 해당 id를 알아야함
=> useParams 를 사용해야함 (client 컴포넌트 훅임) --> 서버 컴포넌트에서는 사용 불가능
=> 클라이언트 컴포넌트로 변경할 수 있지만, 그렇게 되면 서버 컴포넌트의 장점을 잃어버림
(가능한 서버 컴포넌트 위주로 사용하기!)
==> 특정 부분만 클라이언트 컴포넌트화 시키기!
[layout.js]
(변경 전)
<ul>
<li>
<a href="/create">Create</a>
</li>
<li>
<a href="/update/1">Update</a>
</li>
<li>
<input type="button" value="delete"></input>
</li>
</ul>
(변경 후)
function Control() {
return (
<ul>
<li>
<a href="/create">Create</a>
</li>
<li>
<a href="/update/1">Update</a>
</li>
<li>
<input type="button" value="delete"></input>
</li>
</ul>
);
}
export default async function RootLayout({ children }) {
<body>
{children}
<Control />
</body>
▶ 컴포넌트화 시키기
[layout.js]
import { Control } from './Control';
[Control.js]
'use client';
import Link from 'next/link';
import { useParams } from 'next/navigation';
export function Control() {
const params = useParams();
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"></input>
</li>
</>
) : null}
</ul>
);
}
1) 상단에 'use client'를 사용해서 클라이언트 컴포넌트로 사용
2) useParam을 사용해서 해당 id값 가져오기 (params.id)
3) id값이 있으면 update& 버튼 보여주고 없으면 아무것도 안 보여주기
4) update도 링크 부분에 {'/update/+id'} => 업데이트 클릭시 url 변경 완료
> 홈버튼에서는 create 만보임
> 4. reactnext.js : 서버 컴포넌트에서 클라이언트 컴포넌트 분리클릭해서 들어가면 update + delete 버튼 보임
끝.
반응형
'Next.js' 카테고리의 다른 글
| #02 Next.js (Pages Router) : 설치, 라우터, api폴더 (0) | 2024.02.22 |
|---|---|
| #01 Next.js (Pages Router) 개념, 렌더링 방식 4가지 (0) | 2024.02.21 |
| Next.js : 데이터 조회 (서버 컴포넌트) & 새글 작성( 클라이언트 컴포넌트) + 캐시 (1) | 2023.12.20 |
| Next.js : backend (Json-server) | Server Component (0) | 2023.12.20 |
| Next.js : Single Page Application & 이미지 추가 & CSS (0) | 2023.12.19 |