[Next.js] server/client component, import export, props

💡 server component / client component

server component

- 단순 page.js, layout,js 등이 해당

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

단점 : html 안에 자바스크립트를 넣지 못한다. useState, useEffect, onClick 다 못 쓴다.

 

client component

 'use client'

 

- 페이지 맨 위에 'use client' 라는 코드를 넣어서 사용

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

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

 

특히, client component 를 로드하려면 hydration 이라는 과정을 거치게 되는데, 이 때문에 로드속도가 더 느려진다.

( hydration : html 을 로드하고 나서 거기에 React 문법을 적용하기 위해 컴퓨터가 html 을 읽고 분석하는 과정이 필요하다.)

 

→ 큰 페이지들을 보통 server component 로 만들고, 자바스크립트 기능이 필요한 특정 부분은 client component 로 만들어서 넣는 게 좋다.

---

💡 import / export 문법

파일 분리를 통해 코드를 간결화했을 때, 다른 파일의 함수나 변수들을 가져와서 쓰고 싶다면

 

data.js

let age = 29;

export default age;

 

해당 파일에서 export default 를 통해 먼저 변수를 내보내줘야한다.

 

hi.js

function Hi() {
    return (
        <h1>안녕하세요</h1>
    )
}

export default Hi;

 

마찬가지로 Component 역시 이렇게 내보낼 수 있다.

 

page.js

import age from './data.js'
import Hi from './hi.js'

export default function Cart() {
    return (
        <div>
            <Hi/>
            <h4 className="title">Cart</h4>
            <CartItem/>
            <CartItem/>
            <CartItem/>
        </div>
    )
}

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

 

반대로 내보내진 Component 나 변수를 사용하기 위해서는 사용하고자 하는 js 파일에 상단에 먼저 import 를 해준다.

그럼 다른 Component 처럼 <Hi/> 를 사용하든지, { age } 중괄호를 통해서 변수를 사용할 수 있다. 

 

🔧 여러 변수 내보내고 가져오기

data.js

let age = 20;
let name = 'kim';
export { age, name }

 

기존에 default 만 사용한다면 변수 하나만 내보낼 수 있는데, 위처럼 { } 중괄호를 이용해서 다수의 변수도 내보낼 수 있다.

 

page.js

import {변수1, 변수2} from './data.js'
console.log(변수1)

 

마찬가지로 page.js 에서도 { } 중괄호를 이용해서 데이터를 받아올 수 있다.

---

💡 props

export default function Cart() {
    let cart = ['Tomatoes', 'Pasta', 'KaKao']
    return (
        <div>
            <h4 className="title">Cart</h4>
            <CartItem product={cart[0]}/>
            <CartItem product={cart[1]}/>
            <CartItem product={cart[2]}/>
        </div>
    )
}

function CartItem(props) {
    return (
        <div className="cart-item">
            <p>{props.product}</p>
            <p>$40</p>
            <p>1개</p>
        </div>
    )
}

 

DB 로 부터 cart 를 받았다고 가정을 했다.

 

부모 Component 인 Cart 에서 자식 Component 인 CartItem 으로 props 문법을 사용해 데이터를 전송하려한다. ( 반대는 안됨 )

 

🔧 전송 방법

1. 위 코드처럼 Component 안에 <자식컴포넌트 작명={전해줄데이터} />  꼴로 넣어주고,

2. 자식 Component 에 가서 props Parameter 등록 후 props.작명 으로 사용하면 된다.

 

(참고1) props는 <CartItem 이런거={이런거}  저런거={저런거}> 이렇게 많이 전송가능

(참고2) 일반 문자데이터 전송하려면 중괄호 없이 <CartItem 어쩌구="어쩌구"> 해도 됨

 

🔧 함수 파라미터 문법처럼 사용

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

 

Component 에 위와 같이 props 를 사용해서 함수 Parameter 처럼 사용할 수 있다.

 

"삼성카드 결제 행사중"

"롯데카드 결제 행사중"

 

위와 같이 약간의 변형만 필요한 유동적인 Component 를 호출하고 싶다면 props 를 사용해서 함수 Parameter 를 선언해

<Banner content="삼성카드" />
<Banner content="국민카드" />

 

이렇게 사용할 수 있다.

🔧 Css

<Btn color='blue'/>

function Btn(props) {
    return (
        <button style={{background : props.color}}>버튼</button>
    )
}

export default Btn;

 

이와 같이 css 코드 역시 props 를 활용할 수도 있다.