next · 빌드·타입
오류 문구
You're importing a component that needs useState. This React hook only works in a client component.
무슨 뜻인가
App Router에서는 모든 컴포넌트가 기본으로 서버 컴포넌트인데, useState처럼 브라우저에서만 뜻이 있는 훅을 쓰는 파일을 서버 컴포넌트가 import했다는 뜻입니다. 지시어는 파일 맨 위에 'use client' 한 줄이고, 그것을 붙이면 그 파일과 그것이 import하는 모든 것이 클라이언트 묶음으로 들어갑니다 — 그래서 페이지 전체 대신 상태가 필요한 가장 작은 조각에만 붙이는 것이 값이 싼 선택입니다. 반대 방향으로, 클라이언트 컴포넌트가 자식으로 서버 컴포넌트를 받는 구조로 나누면 데이터 가져오기는 서버에 남겨 둘 수 있습니다. Next.js 13에서는 같은 상황이 "It only works in a Client Component but none of its parents are marked with \"use client\""로 적혔습니다.
고치는 명령
한 줄 명령으로 끝나지 않습니다. 설명에 무엇을 봐야 하는지 적어 두었습니다.
- 내는 도구
- next
- 빌드·타입
- 10
빌드가 내는 오류는 실행 전에 도구가 거절한 것이라 그 자리에서 프로그램을 망가뜨리지는 않지만 대신 두 가지를 물어봅니다 — 타입이나 경로를 실제 모양에 맞게 고칠 것인가, 아니면 as any나 인용 부호 하나로 그 줄만 통과시킬 것인가 — 그리고 대소문자와 확장자, 환경 변수처럼 내 컴퓨터에서만 맞는 것들은 여기서 처음 드러납니다.
오류 문구를 읽는 법
- 첫 줄부터 읽습니다. 아래로 갈수록 도구 내부 이야기이고, 정작 원인은 맨 위에 적혀 있습니다.
- 파일 이름과 줄 번호가 있으면 거기가 시작점입니다 — 스택의 가장 위가 아니라, 내가 쓴 파일이 나오는 가장 위 줄입니다.
- 문구를 그대로 검색합니다. 다만 내 경로와 변수 이름은 지웁니다 — 그 부분이 검색을 방해합니다.
- 같은 문구가 도구 판마다 다르게 나옵니다. 검색 결과가 안 맞으면 판 번호를 함께 넣어 봅니다.
- 고치는 명령을 붙여 넣기 전에 그 명령이 무엇을 버리는지 확인합니다. 되돌릴 수 없는 것이 섞여 있습니다.
자주 묻는 질문
Q. You're importing a component that needs useState. This React hook only works in a client component. 는 무슨 뜻인가요?
App Router에서는 모든 컴포넌트가 기본으로 서버 컴포넌트인데, useState처럼 브라우저에서만 뜻이 있는 훅을 쓰는 파일을 서버 컴포넌트가 import했다는 뜻입니다. 지시어는 파일 맨 위에 'use client' 한 줄이고, 그것을 붙이면 그 파일과 그것이 import하는 모든 것이 클라이언트 묶음으로 들어갑니다 — 그래서 페이지 전체 대신 상태가 필요한 가장 작은 조각에만 붙이는 것이 값이 싼 선택입니다. 반대 방향으로, 클라이언트 컴포넌트가 자식으로 서버 컴포넌트를 받는 구조로 나누면 데이터 가져오기는 서버에 남겨 둘 수 있습니다. Next.js 13에서는 같은 상황이 "It only works in a Client Component but none of its parents are marked with \"use client\""로 적혔습니다.
Q. 어떻게 고치나요?
한 줄 명령으로 끝나지 않습니다. 위 설명에서 무엇을 봐야 하는지 적어 두었습니다.
Q. 어느 도구가 내는 오류인가요?
next입니다. 빌드·타입 갈래에 있고, 문구는 16낱말입니다.