Component 만들기
이 블록이 하나의 template이라고 생각하자!
이 코드가 바로 react의 component를 만드는 코드다.
👉 해석을 해보자면,,
react가 가지고 있는 Component라는 클래스를 상속해서 App이라는 새로운 클래스를 만드는 것. 그 class는 render라는 메서드를 가지고 있다.
<html>
<boyd>
<header>
<h1>WEB</h1>
world wide web
</header>
<nav>
<ul>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ul>
</nav>
<article>
<h2>HTML</h2>
Html IS hyperText Markup Language.
</article>
</boyd>
</html>위 html 구조에서 각 semantice tag 안에 내용이 만약 몇 천줄이 된다면 엄청 복잡할 것이다!
이를 해결하기 위해 react에서 component를 생성해서 사용자 정의 tag를 만들어보기로 한다.
1. 기본 틀 잡기
class 안에 소속된 render라는 함수는 "function" 생략이 가능하다.
❗ Component로 만들 때는 반드시 하나의 최상위 코드로 시작해야 한다.
상단의 header 태그를 Subject라는 태그로 바꾸기 위해 컴포넌트를 생성했다.
그리고 그 컴포넌트를 className="App"에 <Subject>의 태그 형태로 삽입한다.
웹 브라우저에서 확인해 보면, header가 아주 잘 들어간 모습을 확인해 볼 수 있다.
👉 개발자 도구에서 보면 #root > .App 안에 header 태그가 들어가 있는 것을 볼 수 있다.
👀 react로 처리한 코드는 분명 <Subject> 인데, 웹브라우저에서 알아들은 코드는 header라는 이름의 tag이다.
App.js 에서 짜고 있는 코드는 "유사 자바스크립트 코드"이다.
즉, 자바스크립트가 아니다!!!
facebook에서 만든 컴퓨터언어인 jsx로 코드로 작성하면 create-react-app이 자바스크립트 코드로 converting 해주는 것이다.
나머지 Semantic Tag들도 모두 Component로 바꾸어 보자!
→ 복잡도를 획기적으로 낮추는 장점이 있다.
