[React] 컴포넌트명 관련 에러: If you meant to render a React component, start its name with an uppercase letter.

노마드코더로 리액트 JSX에 대한 기초강의를 들으면서 공부하던 중, 아래와 같은 현상이 발생했다.

App.js의 Hello!까지만 출력되고 컴포넌트가 호출되지 않음.

 

나는 분명 민서가 바보인지 묻는 minseoIsFool 컴포넌트를 호출하게 했는데,

호출되지 않고 If you meant to render a React component, start its name with an uppercase letter. 에러를 띄우는 현상을 발견했다.

 

노마드코더 강의 코드와 다르게 쳐서 이런 에러가 발생했나? 싶어서 터미널창을 봤는데 터미널창엔 별다른 에러가 없어 당황했다. 

 

대신 F12를 눌러 크롬 콘솔창을 확인했더니 위 사진과 같은 에러를 발견해 쉽게 문제를 해결할 수 있었다.

다만 다음에도 같은 실수를 하지 않기 위해 포스팅하도록 한다.

---

해결방법

해결방법은 간단하다.

에러메시지 그대로 컴포넌트명을 대문자로 시작하게 해주면 된다!

참고로 자바스크립트 파일명은 소문자여도 상관없었다.

에러를 띄우는 App.js

import React from 'react';
import minseoIsFool from './minseoIsFool'; 

function App() {
  return (
    <div>
      <h1>Hello!</h1>
      // minseoIsFool 컴포넌트명이 소문자로 이루어짐.
      <minseoIsFool />
    </div>
    //return <div className="App" />;
  );
}

export default App;

 

에러가 뜨지 않는 App.js

import React from 'react';
import MinseoIsFool from './minseoIsFool'; 

function App() {
  return (
    <div>
      <h1>Hello!</h1>
      <MinseoIsFool />
    </div>
    //return <div className="App" />;
  );
}

export default App;

결과

정말 말끔하게 잘 돌아감을 확인할 수 있다.

파일명은 관례대로 전부 소문자로 적고, 컴포넌트명만 맨앞글자를 대문자로 써주도록 해야겠다.

이제 맘편하게 Yes 버튼을 마음껏 눌러주자!

 

파일명 관례는 아래 블로그에서 참고할 수 있다.

https://taptorestart.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D-%EC%8A%A4%ED%83%80%EC%9D%BC-%EC%BD%94%EB%94%A9-%EC%BB%A8%EB%B2%A4%EC%85%98-%EC%A1%B0%EC%82%AC

자바스크립트 프로그래밍 스타일, 코딩 컨벤션 조사