[React] 컴포넌트 만들어 사용할 때 생기는 에러 '~이(가) 선언은 되었지만 해당 값이 읽히지는 않았습니다.'

- 몇 년 전에 리액트를 처음 배울 때 보았던 기초적인 이 에러를 오랜만에 리액트를 하면서 다시 경험하게 되었다.

- 아주 기초적인 에러이고 이미 경험했던 에러지만 오랜만에 리액트를 하면서 문제를 찾아내는데 상당한 시간이 걸렸다.

 

문제 상황

Fig 1. 리액트 컴포넌트 안에 생성한 컴포넌트가 인식이 안되었다.

- 컴포넌트 안에 컴포넌트를 생성하여 컴포넌트를 리턴하였는데 아무것도 랜더링이 되지 않았다.

- VScode 상에서는 딱히 에러를 띄워주지 않았고 빌드를 해도 아무런 에러가 생기지 않았다.

- 하지만 VScode 상에서 분명히 선언했던 컴포넌트가 해당 값이 사용되지 않고 있다는 표시가 되었다. 

 

해결

- 리액트를 처음 배울 때 아주 기초적인 것을 까먹고 있었다.

- 바로 리액트 컴포넌트의 이름은 대문자로 시작해야 한다는 것이었다.

- 처음에 컴포넌트 이름은 컴포넌트를 나타내는 변수라서 어떤 형태는 JS에서 허용하는 변수명이면 된다고 생각했는데 리액트는 처음 문자가 대문자로 되어 있어야 컴포넌트로 인식한다. 아래 공식 문서에도 명시되어 있다.

Fig 2. 리액트 공식 문서 (https://reactjs.org/docs/components-and-props.html)

Fig 3. 컴포넌트를 제대로 선언한 경우

- 다음과 같이 첫 글자를 대문자로 선언하면 컴포넌트가 제대로 인식이 되어 원하는 대로 렌더링이 된다.

 

요약

컴포넌트의 첫 문자는 대문자로 작성해야 한다.