Component 만들기

export default function Cart() {
  return (
    <div>
      <h4>Cart</h4>
      <작명></작명>
      <작명></작명>
    </div>
  )
}

function 작명(){
  return(
    <div className="cart-item">
      <p>상품명</p>
      <p>$40</p>
      <p>1개</p>
    </div>
  )
} 

컴포넌트를 만들기 위해서는 function을 만들고 작명을 한다.
관습적으로 영어 대문자로 시작한다.

Server/Client Component

server Component
장점 : 페이지 로드시 자바스크립트가 별로 필요가 없어서 빠름.

단점 : html 안에 자바스크립트를 못 넣습니다. useState, useEffect, onClick 이런거 사용불가능하다.

client Component

장점 : html 안에 자바스크립트 맘대로 넣어서 기능개발 가능.

단점 : 쓸데없는 자바스크립트로 인해 페이지 용량도 커지고 페이지 로딩속도도 약간 느려질 수 있다.

import/export 문법

하나의 파일에 코드를 길게 작성하기 싫으면 다른 파일에 작성한 후에 가져오면 된다.

(data.js)

let age = 20;
export default age;

(page.js)

import 작명 from './data.js'
console.log(작명)

import/export문법은 공부를 해본 내용이니 이정도만 하고 넘어가도록 한다.