Next.js 컴포넌트와 import/export (5)

Next.js에서 컴포넌트와 import/export 활용하기

1. 컴포넌트 만들기

길고 복잡한 HTML 코드를 간결하게 만들기 위해 컴포넌트를 활용할 수 있습니다. 컴포넌트는 HTML 코드를 함수로 만들어 재사용 가능하게 하는 기능입니다.

//jsx
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>
  )
}

위의 코드에서는 작명이라는 컴포넌트를 만들어 HTML 코드를 간결하게 표현하였습니다.

 

2. Server 컴포넌트 vs Client 컴포넌트

Next.js에서는 Server 컴포넌트와 Client 컴포넌트 두 가지 유형의 컴포넌트를 사용할 수 있습니다.
Server 컴포넌트: 페이지 로드 시 JavaScript가 별로 필요 없어 빠르지만, HTML 안에 JavaScript를 사용할 수 없습니다.
Client 컴포넌트: HTML 안에 JavaScript를 사용할 수 있어 기능 개발이 가능하지만, 페이지 용량이 커지고 로딩 속도가 느려질 수 있습니다.

3. Import / Export 문법

다른 파일에 작성한 변수나 함수를 사용하려면, import/export 문법을 활용할 수 있습니다.

//jsx
// data.js
let age = 20;
export default age;

위의 코드에서는 age라는 변수를 export하여 다른 파일에서도 사용할 수 있도록 하였습니다.

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

위의 코드에서는 import를 이용해 data.js 파일에서 export한 age 변수를 가져와 사용하였습니다.

여러 변수나 함수를 export하려면, 아래와 같이 export { 변수1, 변수2 } 형식을 사용할 수 있습니다.

//jsx
// data.js
let age = 20;
let name = 'kim';
export { age, name }
jsx
// page.js
import {age, name} from './data.js'
console.log(age)