네트워크 설정 > DNS 설정
8.8.8.8 추가하고 서버 다시 시작
| 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 - client component, server component (0) | 2024.04.18 |
| Next.js route 페이지 이동 방법 (3) | 2024.02.10 |
next.js 하는데 자꾸 콘솔에 오류떠서 onClick 이벤트가 안먹음...
- 해결방법
layout.js 를 수정해준다.
<html> 태그와 <body> 태그가 있어야 하는것.
layout.js
import Link from "next/link"
import "./globals.css";
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
<html>
<body>
<div>
<div className="navbar">
<Link href="/">홈</Link>
<Link href="/list">List</Link>
</div>
{children}
</div>
</body>
</html>
);
}| querySrv EREFUSED 오류 해결 (0) | 2025.02.05 |
|---|---|
| next.js - 부모에서 자식으로 데이터 전달 (props) (0) | 2024.04.18 |
| next.js - 다른 파일의 내용 import 하는 방법 (1) | 2024.04.18 |
| next.js - client component, server component (0) | 2024.04.18 |
| Next.js route 페이지 이동 방법 (3) | 2024.02.10 |
page.js
export default function Cart() {
let 장바구니 = ['Tomatoes', 'Pasta'];
return (
<div>
<h4 className="title">Cart</h4>
<CartItem item={장바구니[0]}/>
<CartItem item={장바구니[1]}/>
<Banner content="롯데카드"/>
<Banner content="삼성카드"/>
</div>
)
}
function Banner(props){
return <h5>{props.content} 결제 행사중</h5>
}
function CartItem(props){
return (
<div className="cart-item">
<p>{props.item}</p>
<p>$40</p>
<p>1개</p>
</div>
)
}
Cart 부모에서 CartItem 으로 [장바구니] 라는 데이터를 전달
<컴포넌트명 변수명={전달할 데이터}/> 로 사용
자식 펑션에서는 함수 데이터 받듯이 props 를 적어주고
자식 펑션 안에서 props.변수명 으로 사용
자식에서 부모로는 전송 불가
자식에서 자식으로도 전송 불가
+ css
import { Component } from "react"
export default function Cart() {
let 장바구니 = ['Tomatoes', 'Pasta'];
return (
<div>
<h4 className="title">Cart</h4>
<RedButton color='blue' />
</div>
)
}
function RedButton(props) {
return (
<button style={{ backgroundColor: props.color, width: '30px', height: '30px' }}></button>
)
}| querySrv EREFUSED 오류 해결 (0) | 2025.02.05 |
|---|---|
| invariant expected app router to be mounted 오류 (0) | 2024.04.18 |
| next.js - 다른 파일의 내용 import 하는 방법 (1) | 2024.04.18 |
| next.js - client component, server component (0) | 2024.04.18 |
| Next.js route 페이지 이동 방법 (3) | 2024.02.10 |
프로젝트 구조
data.js
let age = 20;
//let name = 'lee';
export default age;
//여러개의 변수는 export {age, name} , import {age, name}
cart > page.js
import data from './data.js'
export default function Cart() {
return (
<div>
<h4 className="title">Cart</h4>
<div className="cart-item">
<p>상품명 {data}</p>
<p>$40</p>
<p>1개</p>
</div>
</div>
)
}
다른곳에 사용할 파일 마지막에 export default 변수;
사용할 파일에 import 변수 from '파일경로';
html 에서 {변수} 로 사용
import 할때 경로는 ./ 부터 적는게 좋음
- 컴포넌트 import
cart > work.js
export default function work() {
return (
<h1>안녕하세요</h1>
)
}
cart > page.js
import { Component } from "react"
import Work from './work.js'
export default function Cart() {
return (
<div>
<h4 className="title">Cart</h4>
<Work/>
</div>
)
}컴포넌트는 첫글자 대문자로 작성 !!
| invariant expected app router to be mounted 오류 (0) | 2024.04.18 |
|---|---|
| next.js - 부모에서 자식으로 데이터 전달 (props) (0) | 2024.04.18 |
| next.js - client component, server component (0) | 2024.04.18 |
| Next.js route 페이지 이동 방법 (3) | 2024.02.10 |
| Next.js 프로젝트 생성 (0) | 2024.02.10 |