23.04.18

넥스트.js에서의 컴포넌트

1. server component
   1. 원래 리액트에서 컴포넌트 만들듯이 만든것
   2. html에 자바스크립트 기능 넣기 불가능(onClick 이런거 다 안됨, 상태관리 불가능)
   3. 자바스크립트가 없어서 속도가 빠르다
   4. 검색엔진 노출 유리함
   5. 큰페이지
2. client component
   1. 파일 맨 위에 ‘use client’ 넣고 만든것
   2. 자바스크립트 기능 가능, 상태관리 가능
   3. 로딩속도 느림
   4. hydration 필요 (html을 리액트로 분석하는 일 필요함)
   5. 큰페이지에 기능들

props의 활용

공통 컴포넌트 만들때 굉장히 유용하게 쓰일 듯 하다

function Banner(props) {
  return <h5>{props.content} 결제 행사중</h5>;
}

부모 컴포넌트에서 content 라는 변수로 props를 받는다

export default function Cart() {
  // 데이터베이스에서 가져온거라고 생각
  let cart = ["Tomatoes", "Pasta"];
  return (
    <div>
      <h4 className="title">Cart</h4>
      <CartItem cart={cart[0]} />
      <CartItem cart={cart[1]} />
      <Banner content="롯데카드" />
      <Banner content="현대카드" />
    </div>
  );
}

content만 전달하면

함수 컴포넌트를 여러개 안만들어도 된다.

map 함수를 사용했을 때 각각 button 을 만지는 방법

export default function List() {
  //db데이터를 가져왔다고 생각함
  let products = ["Tomatoes", "Pasta", "Coconut"];
  const [count, setCount] = useState(0);

  const onIncrease = () => {
    setCount(count + 1);
  };

  const onDecrease = () => {
    setCount(count - 1);
  };
  return (
    <div>
      <h2 className="title">Products</h2>
      {products.map((item, i) => {
        return (
          <div className="food" key={i}>
            <img src={`/food${i}.png`} className="food-img" />
            <h4>{item} $40</h4>
            <button onClick={onDecrease}>-</button>
            <span> {count} </span>
            <button onClick={onIncrease}>+</button>
          </div>
        );
      })}
    </div>
  );
}

현재는 + 버튼을 누르면 랜더링 된 버튼들이 동시에 숫자가 올라간다

const onIncrease = () => {
    let copy = [...count];
    copy[0]++;
    setCount(copy);
  };

그럴대는 새로운 배열을 만들어서 상태를 변경 시켜준다 (덮어씌운다고 생각하면 쉽다)

몽고DB

1. 설치

npm install mongodb

2. 몽고디비에 연결

import { MongoClient } from 'mongodb'
const url = 'DB접속URL~~'
const options = { useNewUrlParser: true }
let connectDB

if (process.env.NODE_ENV === 'development') {
  if (!global._mongo) {
    global._mongo = new MongoClient(url, options).connect()
  }
  connectDB = global._mongo
} else {
  connectDB = new MongoClient(url, options).connect()
}
export { connectDB }

필요한곳에 connectDB를 가져와서 쓰면 된다

예시 :

import { connectDB } from "/util/database.js"

export default async function Home() {
	let db = (await connectDB).db('forum'););
  let result = await db.collection('post').find().toArray();

  return (
    <main>
      {result[0].title}
    </main>
  )
}

async await

await에 대한 설명을 명확히 하지 못했는데

js는 처리가 늦어지는 코드를 보면 그냥 넘어가려고 하기 때문에 그걸 기다려 줄때 붙여준다

하지만 아무곳이나 붙이는건 아니고 promise를 뱉는 코드에만 사용 가능하다

게시글 반복하기

<div className="list-item">
	<h4>{result[0].title}</h4>
	<p>1월 1일</p>
</div>
<div className="list-item">
	<h4>{result[1].title}</h4>
	<p>1월 1일</p>
</div>
<div className="list-item">
	<h4>{result[2].title}</h4>
	<p>1월 1일</p>
</div>

같은 div 태그가 반복된다

{result.map((a, i) => {
  return (
    <div className="list-item" key={i}>
      <h4>{result[i].title}</h4>
      <p>1월 1일</p>
    </div>
  );
})}

그럴땐 map으로 반복 돌려버리기

다이나믹 url

다이나믹 url을 만들때는 대괄호를 사용한다

예시 :

게시물 하나만 가져오는 코드

db.collection(컬렉션명).findOne(찾을document내용)

파라미터로는 그 글의 내용 일부를 넣어주면 되는데 몽고 db는 고유의 id값을 자동으로 만들어주기 때문에 그것을 넣으면된다

해당 게시글로 넘어가기

참고 : 네이버 블로그 주소

네이버 블로그 주소를 보면 /고유의 아이디

이런 식으로 작명이 되어있다 즉 우리도 / 뒤에 글마다 고유의 아이디를 붙여주면 된다

하지만 이러면 하드 코딩이 불가피하다 그래서 props를 받아서 콘솔에 찍어보면

이런 내용이 출력되는데 이것은 주소창 맨끝의 번호이다(내가 임이로 적어놨다)

이걸 사용하면

props.params.details

이것이 각각 게시글의 주소가 될것이다

항상 콘솔을 찍어보는 버릇을 들이자

문자와 표현식 합쳐 쓰기

<Link prefetch={false} href={"/detail/" + result[i]._id}>

기호 플러스를 사용하자

useRouter

유용한 기능들 많음!!

클라이언트 컴포넌트 에서만 사용가능

사용법

1. 임포트

// next/router이 아닌 next/navigation으로 변경
import { useRouter } from "next/navigation";

1. 변수 설정

//보통 router이라고 많이 사용한다
  let router = useRouter();

1. 사용

return (
    <button
      onClick={() => {
        router.push("/");
      }}
    >
      버튼
    </button>
  );

1. 추가

//router.push('이동할 경로')
//router.back() : 뒤로가기
//router.forward() : 앞으로가기
//router.refresh() : 새로고침
//router.prefetch() : 미리 로드를 해서 빠르게 이동하도록 해주지만 link태그에 이미 내장되어있다.