[React] React Hook "useEffect" is called in function 에러 해결

문제 발생 원인

youtube에 있는 react강의를 따라하다가 에러가 발생했다. 

상세한 에러 문구

React Hook "useEffect" is called in function "index" 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)

알고보니, `React` 의 컴포넌트는 대문자로 시작해야 `useEffect`, `useState` 같은 hook을 사용할 때 오류가 나지 않는다는 것.

React는 대소문자를 구분하는 특성이 있다고 한다. 

이렇게 `index`라는 컴포넌트 함수에다가 `useState`, `useEffect`를 넣어서 사용하니 에러가 났다.

 

문제 해결 방법

💡 컴포넌트 이름을 대문자로 바꿔주자!

`index` -> `Index`로 변경했더니, 에러 밑줄이 깔끔하게 지워졌음

 

❓ 대문자로 바꿔야 하는 이유는?

React가 JSX에서 태그를 사용할 때, `기본  HTML 요소`와 `사용자 정의 컴포넌트`를 구분하는 방식이 다르기 때문

• 소문자로 시작하면 : 기본 HTML 요소(`div`, `span`, `p` 같이) 로 인식
• 대문자로 시작하면 : 사용자 정의 컴포넌트로 인식해서, 함수/클래스 등으로 정의된 컴포넌트를 렌더링 함

그래서, React 공식 문서에도 컴포넌트를 명명할 때, 대문자로 시작할 것을 권장한다!