use client를 남발하면 생기는 일
배경
프로젝트를 시작할 때, 팀원들과 프로젝트 기술 스택을 논의하였고, Next.js를 선택했다.
그런데 당시 나의 Next.js에 대한 이해도는 거의 0에 수렴했다. 대체적으로 React와 비슷하며, React와의 큰 차이점으로는 서버 컴포넌트와 앱 라우트 정도가 있다는 간단한 설명만 팀원들에게 전해 듣고 작업에 착수하게 되었다.
문제 발생
시간 관계상 나는 별다른 공부를 하지 못하고 바로 코드를 작성하게 되었다.
작업을 할 때 "use client"를 사용하면 해당 컴포넌트가 클라이언트 컴포넌트로 변한다는 건 알았는데, 이것에 어떠한 장단점이 있는지는 알지 못하였다.
그래서 그것에 대해 제대로 된 학습이 필요하다는 것을 느꼈다.
문제 해결
서버 컴포넌트와 클라이언트 컴포넌트의 차이점부터 명확하게 알아야 했다.
서버 컴포넌트는 서버 측에서 미리 자바스크립트 코드를 가져와서 HTML 코드를 만든 다음 클라이언트로 보내주는 형태이다.
클라이언트 컴포넌트는 브라우저에서 실행되는 자바스크립트 코드로 실행되며, 서버에서 렌더링된 HTML을 받아와서 동적으로 처리하고 상호 작용 하는 컴포넌트이다.
Next.js는 서버 컴포넌트를 활용하여 페이지 로딩 속도를 빠르게 만들고, SEO에 유리하게 할 수 있게 한다. 클라이언트 컴포넌트는 서버 컴포넌트에 비해 로딩 시간이 느리다.
하지만 서버 컴포넌트는 동적으로 바꿀 수 없다는 단점이 있다. 이 말은 곧 HTML에 자바스크립트 기능을 넣을 수가 없다는 것이다. 서버 컴포넌트에서는 useState나 useEffect 등을 이용할 수 없다.
그래서 동적으로 관리하고 싶은 컴포넌트는 "use client"를 사용하여 클라이언트 컴포넌트로 바꾸어 사용해야 한다.
| 무엇을 해야 할까요? | Server Component | Client Component |
|---|---|---|
| 데이터 가져오기 | ✅ | ❌ |
| 백엔드 리소스에 직접 액세스하기 | ✅ | ❌ |
| 서버에 민감한 정보 유지하기 (액세스 토큰, API 키 등) | ✅ | ❌ |
| 큰 종속성을 서버에 유지/클라이언트 측 JavaScript 줄이기 | ✅ | ❌ |
| 상호 작용 및 이벤트 리스너 추가하기(onClick(), onChange() 등) | ❌ | ✅ |
| 상태 및 라이프사이클 효과 사용하기(useState(), useReducer(), useEffect() 등) | ❌ | ✅ |
| 브라우저 전용 API 사용하기 | ❌ | ✅ |
| 상태, 효과 또는 브라우저 전용 API에 의존하는 사용자 지정 훅 사용하기 | ❌ | ✅ |
| React Class 컴포넌트 사용하기 | ❌ | ✅ |
하지만 전술했듯이 클라이언트 컴포넌트가 많아지면 페이지 로딩 속도가 느려지기 때문에 클라이언트 컴포넌트를 가능한 최소화하여 개발하는 것이 좋다.
큰 틀은 서버 컴포넌트로 개발하고, 안에 동적인 컴포넌트를 클라이언트 컴포넌트로 구성하는 것이 효율적인 컴포넌트 개발 방식이라고 할 수 있다.
위 내용을 잊지 않고 클라이언트 컴포넌트는 컴포넌트 트리의 leaf로 구성할 수 있게끔 코드를 작성해 보도록 해야겠다!
