왼쪽의 html 코드를 js 코드로 바꾸는 과정은 다음과 같이 진행합니다.
1. 컴포넌트를 만들겠다는 클래스를 선언한다.
- App.js의 5번 줄의 class Subject extends Component 보면 Subject라는 클래스를 만들겠다는 선언을 합니다.
- 선언할 컴포넌트 이름은 대문자로 작성합니다. (Subject가 컴포넌트 이름)
2. render 함수를 선언한다.
- 원래는 함수 선언 할 때는 function으로 선언하는데 자바스크립트 최신 문법에서는 function을 생략합니다.
3. return 안에는 최상위 태그로 시작해야 합니다.
- <h1>이 최상위 태그이므로 <h1>에서 시작을한다.
아래의 App 컴포넌트는 <div>태그가 최상위 이므로 하나의 태그만을 리턴한다. 즉, 현재 작성한 구문에서 리턴을 받게 되는 태그는 <Subject>입니다.
만약 return 안에 있는 태그의 최상위가 <body>라면 어떻게 될까요?
개발자 도구의 콘솔 창을 보면 오류 메세지가 나오게 되는데
validateDOMNesting(...): <body> cannot appear as a child of <div>.
이 메세지의 뜻은 <body>는 <div>의 자식으로 될 수 없다. 라는 뜻입니다.
한마디로 문법에 맞지 않게 사용했기 때문입니다.
위 방법대로 html의 나머지 부분을 App.js에 컴포넌트화를 시켜보면
Title의 부분은 <nav>를, Context의 부분은 <article> 태그를 변환하였습니다.
저장 후 웹페이지 창을 확인해보면 아래와 같이 적용되었음을 확인 할 수 있습니다.
'FrontEnd > React' 카테고리의 다른 글
| 리액트 컴포넌트 만들기 [덧붙이기] (0) | 2022.03.16 |
|---|---|
| 리액트에서의 코딩과 배포 (0) | 2021.12.01 |
| 리액트 웹 실행 시키기 (0) | 2021.12.01 |
| 리액트 관련 도구 [React Developer Tools] (0) | 2021.03.24 |
| React 의 간단 개념과 설치 방법 (0) | 2021.01.20 |
