React 컴포넌트 호출 오류 : [ ... is using incorrect casing. ]

 

처음 컴포넌트에 대해 공부하고 있는데, 이런 오류가 났다.

 

Warning: <todoList /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
    at todoList
    at div
    at App

뭔가 싶어 해석해보면 

 

리액트 컴포넌트는 PascalCase 를, HTML 엘레먼트는 lowercase(소문자)를 사용하라는 것이다!

그럼 PascalCase는 뭘까?

---

파스칼 표기법

"PascalCase"

첫 단어를 대문자로 시작하는 표기법

예시: BackgroundColor, TypeName, PowerPoint

 

---

CamleCase와 비슷하지만 첫단어도 대문자라는 차이점이 있다.

오류 메시지에서 나왔듯, 내가 만든 컴포넌트 이름은 todoList로 카멜케이스를 사용했다. 맨 앞이 소문자라 오류가 났던것...

 

결론은 "대문자"!

 

 

---

참고 :

https://zetawiki.com/wiki/%EC%B9%B4%EB%A9%9C%ED%91%9C%EA%B8%B0%EB%B2%95_camelCase,_%ED%8C%8C%EC%8A%A4%EC%B9%BC%ED%91%9C%EA%B8%B0%EB%B2%95_PascalCase