[ReactJS] 리액트 오류, React Hook "useEffect" is called in function

[eslint] 
src\pages\CartPage\index.js
Line 4:3:  React Hook "useEffect" is called in function "cart" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"  react-hooks/rules-of-hooks

Search for the keywords to learn more about each error.

 

 

오류 발생 원인

이 오류는 리액트 컴포넌트의 이름이 소문자로 시작되었기 때문에 발생한다. 리액트에서는 컴포넌트는 대소문자를 구분하기 때문에 이름이 대문자로 시작해야 한다. 또한, 리액트 훅(useEffect, useState 등)은 대문자로 시작하는 컴포넌트 내에서만 호출할 수 있기 때문에, 이 오류가 발생한다.

 

function cart() {  // 컴포넌트 이름이 소문자로 시작해서 오류가 남
  useEffect(() => {
    console.log('안녕 난 useEffect Mounted!')
  })
  return(
    <div>
      <h3>Cart Page</h3>
    </div>
  )
}

export default Cart;

오류 해결 방법

컴포넌트 이름을 대문자로 시작하도록 수정하면 오류는 해결된다. 리액트 컴포넌트의 이름은 항상 대문자로 시작해야 한다. 위의 예제처럼 컴포넌트의 이름을 cart라고 하면 오류가 나고, Cart라고 변경하면 오류가 나지 않는다.

 

리액트 컴포넌트는 대문자로 시작해야 한다. 소문자로 시작하는 이름은 리액트가 해당 함수가 컴포넌트가 아니라고 간주할 수 있기 때문이다. Hooks을 사용할 때는 대문자 시작의 함수 내에서만 사용해야 한다. useEffect는 리액트의 훅이므로, 이를 소문자로 시작하는 함수 내에서 호출하면 react-hooks/rules-of-hooks 규칙에 의해 오류가 발생한다.

 

 

---

 

컴포넌트의 이름을 대문자로 시작해야하는 이유

리액트 컴포넌트 이름을 대문자로 시작하는 것은 React의 동작 방식과 JSX 해석 규칙을 따르기 위한 필수적인 규칙입니다. 이를 통해 오류를 방지하고, 코드의 가독성과 유지보수성을 높일 수 있습니다.

 

JSX에서의 동작 규칙 때문

JSX 문법에서는 대문자로 시작하는 이름은 리액트 컴포넌트로 인식되고, 소문자로 시작하는 이름은 HTML 태그로 처리된다.

function MyComponent() {
  return <div>Hello World</div>;
}

function App() {
  return <MyComponent />;  // 정상: React 컴포넌트로 인식
}

 

위의 코드에서는 리액트에서 정상적인 리액트 컴포넌트로 인식하지만 반대로 소문자로 시작하면 오류가 난다.

function myComponent() {
  return <div>Hello World</div>;
}

function App() {
  return <myComponent />;  // 오류: HTML 태그로 처리하려 하지만 존재하지 않는 태그
}

 

리액트는 <myComponent />를 HTML 태그로 해석하려 시도하기 때문에 컴포넌트가 정상적으로 렌더링되지 않는다.


리액트의 내부 규칙 때문

리액트는 컴포넌트가 대문자로 시작할 것이라는 전제하에 동작한다. 대문자로 시작하지 않으면 리액트는 해당 요소를 DOM 태그로 해석하려고 시도한다. 따라서 컴포넌트 이름을 대문자로 시작하면 리액트가 이를 사용자 정의 컴포넌트로 올바르게 인식한다.

코드 가독성 및 일관성 때문

대문자로 시작하는 컴포넌트 이름은 HTML 태그와 구별하기 쉬워 코드의 가독성을 높인다. 팀 협업 시에도 일관된 네이밍 규칙을 유지하는 것이 좋다.

리액트의 경고 메시지 때문

만약 소문자로 시작하는 컴포넌트를 사용하면 리액트 개발 모드에서 경고 메시지가 표시될 수 있다.
아래의 경고는 리액트가 <mycomponent>를 HTML 태그로 해석했으나, 해당 태그가 없다는 의미이다.

Warning: The tag <mycomponent> is unrecognized in this browser.