Next.js - 렌더링

서버 컴포넌트와 클라이언트 컴포넌트

1. 서버 컴포넌트
   • 기본적으로 app 디렉토리 내에 있는 모든 컴포넌트는 서버 컴포넌트로 처리된다.
   • 서버 컴포넌트는 클라이언트의 상태나 이벤트같은 상호작용을 무시한다. 즉, 서버의 작업을 집중적으로 처리한다. (데이터, 요청, 로직 처리)
2. 클라이언트 컴포넌트
   • 클라이언트 측에서 실행되는 컴포넌트이다.
   • “use client” 지시어를 사용한다.

---

“use client” 지시문

use client 지시문은 서버와 클라이언트 컴포넌트 모듈 그래프 사이의 경계를 선언하는 규칙이다.

Next.js는 CSR과 SSR이 모두 가능한만큼 둘을 구분해야할 필요가 있다. use client는 클라이언트 전용 컴포넌트로 지정한다. 즉, CSR로 렌더링 지시어이다.

서버 컴포넌트가 기본이기 때문에 서버 컴포넌트 사용을 원할 시에는 아무런 지시문을 작성하지 않아도 된다. 서버 컴포넌트는 서버에서만 렌더링되는 것을 보장한다.

*use client 지시문은 import 이전 파일 최상단에 정의되어야 함.

클라이언트 컴포넌트로 렌더링 (CSR)

클라이언트 컴포넌트를 만들어 상태를 관리해보자.

처음에 가장 많이 하는 카운터 예제이다.

/app/components/Counter.js

"use client";

import { useState } from 'react';

export default function Counter() {
    const [count, setCount] = useState(0); 
    
    const increaseCount = () => {
        setCount(count + 1);
    };
    
    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={increaseCount}>Increase Count</button>
        </div>
    );
}

use client 지시문으로 클라이언트 렌더링 선언

vue의 ref와 방식이 비슷해보이는데..?

• useState : 뷰로 치면 ref. 상태 관리를 해준다. 하지만 그 방식은 vue의 ref와 차이가 있다. ref는 값의 변경이 일어났을 경우 객체의 변화를 감지하고 UI를 변경하는데 useState는 컴포넌트 렌더링이 일어날 경우 변경한다고 하더라..
• 아직 잘 이해는 안되지만 아마 react에서는 상태가 바뀌었을 경우 렌더링을 일으키는 듯 하다. 렌더링을 감지하고 상태가 변경되었을 때 리렌더링하는 듯 하다. 나중에 더 공부해야겠다..

useState 함수 핥기

신기한 문법이 있는데

const [count, setCount] = useState(0); 이다.

useState의 반환값은 count라는 상태 변수와 setCount라는 상태를 업데이트할 수 있는 함수라고 한다.

꼭 상태변경 함수를 사용해야 하는데, 객체를 직접 변경할 경우 리액트의 반응성 시스템을 거치지 않기 때문에 상태 불일치가 발생할 수 있다.

/app/page.js

import Counter from './components/Counter';

export default function HomePage() {
  return (
    <main>
      <h1>Welcome to Next.js 13!</h1>
      <Counter />
    </main>
  );
}

느낌이 온다.. page.js를 root로 하고 트리 구조로 컴포넌트들을 삽입하는 vue의 향기.. 이 부분은 문법이 상당히 비슷한 것으로 보였다.

근데 저거 html을 js에 넣는거 jsx파일에서만 되는거 아님?

js파일이면 가능하다. 문법이 jsx문법이기 때문에 명확히 하기 위해 jsx를 사용하지만 js에 해도 문제는 없다. Babel이 이걸 인식하고 자동 변환해준다.

*Babel은 의존성 문제가 있다고 알고 있는데 여전히 많은 프로젝트에서 사용된다고 한다. Next.js는 Babel을 기본 내장

---