클라이언트 컴포넌트에서 정의한 Pagination 컴포넌트에, DEFAULT_PER_PAGE = 10 값을 정의하고 다른 곳에서도 사용할 수 있게끔 아래와 같이 export 하였다.
// 클라이언트 컴포넌트에서 정의한 상수
'use client';
export const Pagination = () => { ... }
export const per_page = 10;// 서버 컴포넌트에서 사용하려고 할 때
import { per_page } from '@/lib/constants';평소대로라면 기본 상수 정의 파일에 따로 선언하겠지만, 중요도가 낮은 프로젝트라 건너뛰었다. 그리고 한 이상한 현상을 맞이했다. import 한 per_page 값이 알수 없는 [Function (anonymous)] 로 읽혀지는 것이었다...
사실 서버컴포넌트의 동작방식만 생각해보면 당연하다. 그동안 개발자 입장에선 큰 구분감없이 두가지 방식의 컴포넌트를 사용하고 있었으니, 잠깐 망각했었다. 서버 컴포넌트와 클라이언트 컴포넌트 특징을 잠깐 짚고 넘어가보자.
서버 컴포넌트(Server Component)
- 서버에서 실행됨 (Node.js 환경)
- 클라이언트 측 JS 번들에 포함되지 않음
- 직접 데이터베이스 접근, API 호출, 보안 관련 로직 등을 수행 가능
- 클라이언트 컴포넌트를 자식(children)으로 포함할 수 있음
클라이언트 컴포넌트(Client Component)
- use client를 선언한 컴포넌트
- 브라우저에서 실행됨
- 사용자 상호작용(이벤트 핸들러, 상태 관리 등)을 처리
- 서버 컴포넌트를 포함할 수 없음 (children으로 서버 컴포넌트 호출은 가능)
export const per_page = 10 같은 상수를 클라이언트 컴포넌트에서 선언하면, 이는 브라우저 환경에서만 접근 가능한 모듈이 되므로 서버에서 이 값에 접근하고자 import를 하면, 실제 값에 접근을 하지 못하게 되는것이다.
즉, 서버 측에서는 클라이언트 컴포넌트 파일을 참조만하게 되므로, 단순한 상수값 10을 반환하는것이 아니라 클라이언트에서 실행될 코드 자체를 감싸는 함수 형태 Function (anonymous)] 으로 변환되어 전달되는 것이다.
해결 방법은 간단하다. 간단하게 서버와 클라이언트 모두 같은 별도의 유틸 파일에서 정의한 후 관리하는 것이다. constants.ts 와 같은 파일에서 말이다! 또한, 같은 문제의 반복을 피하기 위해 클라이언트 컴포넌트에서 사용되는 값은 되도록 해당 컴포넌트 내부에서만 사용하고, 값의 공유를 최대한 피하도록 하자.
