-컴포넌트 만드는 방법
page.js
import { Component } from "react"
export default function Cart() {
return (
<div>
<h4 className="title">Cart</h4>
<CartItem/>
<CartItem/>
<CartItem/>
</div>
)
}
function CartItem(){
return (
<div className="cart-item">
<p>상품명</p>
<p>$40</p>
<p>1개</p>
</div>
)
}
function 이름() {
return ( <html> )
}
html은 <div></div> <div></div> 이렇게 올수 없으며 큰 <div> 로 감싸주어야 함
컴포넌트를 만들고 다른곳에서 <이름/> 이렇게 가져다 쓸 수 있음.
ex)
- server component
onclick 같은 자바스크립트 기능 넣기 불가 (오로지 html만)
속도 빠름
검색엔진 노출에 유리
큰 페이지에 추천함
- client component
.js 파일 맨위에 'use client' 를 넣으면 사용가능
자바스크립트가 들어가므로 로딩 속도가 느림
자바스크립트가 필요한 파일에만 넣으면 좋음
'공부 > Next.js' 카테고리의 다른 글
| invariant expected app router to be mounted 오류 (0) | 2024.04.18 |
|---|---|
| next.js - 부모에서 자식으로 데이터 전달 (props) (0) | 2024.04.18 |
| next.js - 다른 파일의 내용 import 하는 방법 (1) | 2024.04.18 |
| Next.js route 페이지 이동 방법 (3) | 2024.02.10 |
| Next.js 프로젝트 생성 (0) | 2024.02.10 |