HTML 을 리액트 컴포넌트로 나누기

참고한 원문 :

https://nextjs.org/learn/foundations/from-javascript-to-react/building-ui-with-components

 

분리 전 원본 소스 :

    <!-- Babel Script -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/jsx">
      const root = document.getElementById('root');
      ReactDOM.render(<h1>Develop. Preview. Ship.🚀</h1>, root); // 이 부분을 떼어냄
    </script>

 

JSX 를 함수형 컴포넌트로 분리 :

    <!-- Babel Script -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/jsx">

      const root = document.getElementById('root');

      function header() {
        return (<h1>Develop. Preview. Ship.🚀</h1>)
      }

      ReactDOM.render(header, root);
    </script>

 

문제가 생겼다.

브라우저에서 유효한 컴포넌트가 아니며 <Component /> 형태로 표기하랍신다~~

 

해결 방법)

1. HTML 요소와 구별하기 위해서 컴포넌트 이름 앞 글자를 알파벳 대문자로 표기해야 한다. (소문자는 인식불가)
2. 컴포넌트를 JSX 처럼 꺽쇠로 감싸서 ReactDom.render() 에 인자로 넘기면 된다.