2023.12.05+ next js 컴포넌트 만들기

import { age, name, hello } from "./data.js";

/* "use client" */

export default function Cart() {
  let 장바구니 = ["tomato", "pasta"];
  return (
    <div>
      <h4 className="title">Cart</h4>
      <CartItem item={장바구니} />
      <Banner content="롯데카드" />
      <Banner content="현대카드" />
      <RedButton color="blue" />
    </div>
  );
}

//1.더러운코드축약
//같은코드재사용
//서버컴포넌트,클라이언트컴포넌트
//"use client";
//차이는 서버컴포넌트는 자바스크립트 기능을 집어넣을수없음 ex onclick,usestate 등 but 서버컴포넌트는 로딩속도가 더 빠르고 검색엔진 노출의 이점이 있음
//클라이언트 컴포넌트는 가능함  이걸로 페이지를 만들어버리면 자바스크립트 파일일 많아져서 무거워짐, hydration 필요(리액트 문법을 html을 유저한테 쏴준다음에 분석하는작업)

function CartItem({ item }) {
  /*   let 장바구니 = ["tomato", "pasta"]; //기존 리액트 js  이렇게 데이터를 다시 호출하는것은 비효율적이지만
next js 에서는 같은요청이 여러개면 1개로 압축해주는 deduplication 이라는 기능 덕에 상관 없을 수 있음 */
  return (
    <div className="cart-item">
      <p>{item[1]}</p> <p>$40</p> <p>1개</p>
    </div>
  );
}

https://codingapple.com/

코딩애플 온라인 강좌 - 개발자도 단기완성!