[html/next.js] component 문법

component에 앞서

우선 기존 프로젝트에 [cart]폴더를 새로 생성해줍니다.

그리고 page.js라는 이름의 파일을 생성 합니다.

/cart 페이지 레이아웃

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

 

global.css

  .cart-item {
    padding: 10px;
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid grey;
    line-height: 0px;
  }

그리고 위 두 코드를 추가해줍니다. 

 

다시 한 번 설명하자면 첫번째는 페이지를 생성하는 코드이고, global.css코드는 페이지를 꾸미는 코드입니다.

css코드는 마음대로 보기 좋게 꾸미셔도 괜찮습니다.

 

코드를 추가하고 저장한 뒤 http://localhost:3000/cart 로 이동하면 위와 같이 새로운 페이지가 생성되었습니다! 

 

Component란?

간단하게 설명하면 길고 복잡한 html코드를 한 단어로 축약하는 것을 component라고 한다.

 

Component 만드는 방법

 

1. function 작명 (){}

2. return (축약할 긴 HTML)

3. <작명/> 사용

 

export default function Cart() {
    return (
        <div>
            <h4 className="title">Cart</h4>
            <div className="cart-item">
                <p>상품명</p>
                <p>$40</p>
                <p>1개</p>
            </div>
            <CartItem></CartItem>
        </div>
    )
}

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

위에 작성한 코드에서 component로 만들어서 코드를 수정하였습니다. 

만약에 아래처럼

<CartItem></CartItem>

코드를 열고 닫는게 귀찮으시다면,

<CartItem/>

위 코드로 변경해도 동일하게 작동합니다.

 

 

 

추가적으로, 만들어 놓은 component 문법을 여러개 작성하면 아래와 같이 여러개가 노출됩니다.

export default function Cart() {
    return (
        <div>
            <h4 className="title">Cart</h4>
            <div className="cart-item">
                <p>상품명</p>
                <p>$40</p>
                <p>1개</p>
            </div>
            <CartItem/>
            <CartItem/>
            <CartItem/>
            
        </div>
    )
}

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

위와 기본적으로 만든 component 문법은 server component입니다.

그러나 component에는 2가지 종류가 있습니다.

 

server와 client입니다.

server component는 html에 자바스크립트 기능 넣기가 불가능합니다. (예를 들면, 온클릭/버튼 같은 기능)

그러나 파일 최상단에 'use client'를 입력하면 client component로 변하는데 이때는 자바스크립트 기능 넣기가 가능해집니다.

 

그러면 client component가 더 좋은거네? 맞습니다!

 

하지만, server component는 로딩속도가 빠르고, 검색엔진 노출에 유리합니다. 

 

그러니 용도에 맞게 적절하게 서버/클라이언트로 이용하시면 될 것 같습니다.