[번역] JS Bites: React hook is called in a function which is neither a React function or a custom React Hook
본 글은 https://dev.to/ranewallin/js-bites-react-hook-is-called-in-a-function-which-is-neither-a-react-function-or-sic-a-custom-react-hook-1g2c를 한국어로 번역한 글입니다.
자, 여러분은 이제 React Hooks를 제대로 해보기로 마음먹으셨군요. (바라건대) 여태까지는 모든 게 잘 되고 있었을 것입니다. 아래와 같은 기이한 에러를 만나기 전까지는 말이죠.
import React, { useState } from 'react';
const landingPage = ({ user }) => {
const [user, setUser] = useState(user);
return (
<div>
<span> Your users is </span> { user.name }
</div>
);
}
export default landingPage;Error: React Hook “useState” is called in a function “landingPage” which is neither a React function or a custom React Hook function. (에러: React Hook의 “useState”가 React 함수나 custom React Hook 함수가 아닌 “landingPage”란 함수에서 호출되었습니다.)
오 이런! 무슨 일이 일어난 거죠? 저 에러 메세지의 끔찍한 문법은 차치하고서도 뭐가 잘못된 거죠? 이건 분명 React 컴포넌트 같이 생겼는데 말이죠. 여러분은 React를 import하셨잖아요. 여러분은 useState도 잘 import하셨고요. 그리고 여러분의 함수를 export하고 있어요. 모든 건 잘 동작해야만 하는데, 그렇지 않습니다.
바로 이 부분을 기억해야 합니다. 여러분이 React Hooks를 사용하고 있다면, 여러분의 functional 컴포넌트는 *반드시* 대문자로 시작해야 합니다. 이 경우를 보시면 함수 이름은 landingPage입니다. 이 부분을 LandingPage라고 바꾼다면, 모든 건 예상대로 잘 작동할 것입니다.
유사하게, 만약 여러분이 custom hook 안에서 hook을 사용하려고 하신다면, custom hook의 이름 또한 *반드시* 소문자인 “use”로 시작해야 합니다.
왜 그런지를 더 알아보시려면, 이 주제에 대한 React 문서를 확인해주세요.
