🧇 HTML 코드 작성하기
public이라는 디렉토리는 create-react-app에서 npm을 실행시켰을 때, 파일을 찾는 document root를 의미한다. public디렉토리 안에 간단한 pure.html을 추가한다.
<html>
<body>
<!-- header 는 시멘틱 태그, 기능상의 변화는 없지만 기능과 위치를 알려준다 -->
<header>
<h1>MEOW</h1>
The cat rules the world!
</header>
<!-- nav 는 시멘틱 태그 -->
<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 은 시멘틱 태그 -->
<article>
<!-- h2 는 본문표현-->
<h2>HTML</h2>
HTML is HyperText Markup Language.
</article>
</body>
</html>
터미널에서 npm을 실행시키고 localhost:3000/pure.html에 들어가보면 다음과 같은 화면을 볼 수 있다.
🧇 React로 Component 만들기
pure.html과 App.js를 함께 보며 진행한다. 우선 미리 말하자면 Component를 만드는 부분은 이렇게 구성된다.
class App extends Component {
render() {
return (
<div className="App">
Hello, React!!
</div>
);
}
}
위 코드의 의미는 App이라는 클래스를 만들고 리액트의 Component라고 하는 클래스를 상속해 새로운 클래스를 만드는 것을 의미한다. 그리고 그 클래스는 render()라는 메소드를 가지고 있다. 여기서 클래스는 대문자로 시작해야 한다!
그럼 위 pure.html의 <header> 태그 안의 코드와 같은 동작을 수행하는 컴포넌트를 만들어보자. 우리는 이 컴포넌트의 이름을 Subject라 하겠다. App.js를 다음과 같이 수정한다.
아래의 코드는 유사 자바스크립트이며 진짜 자바스크립트는 아니다. 문법상 오류가 존재하며 우리가 사용하는 언어는 자바스크립트가 아닌 JSX이다. 우리가 JSX로 코드를 작성하면 create-react-app이 알아서 자바스크립트 코드로 바꿔준다.
import React, { Component } from 'react';
import './App.css';
class Subject extends Component {
render() {
return (
<header>
<h1>MEOW</h1>
The cat rules the world!
</header>
);
}
}
class App extends Component {
render() {
return (
<div className="App">
<Subject></Subject>
</div>
);
}
}
export default App;
이렇게 하고 실행하면 App.js의 App 태그 밑 Subject 태그가 pure.html의 header 부분과 같은 동작을 하는 것을 볼 수 있다.
같은 방법으로 나머지 태그들도 복사해주면 App.js는 다음과 같이 수정할 수 있다.
import React, { Component, PureComponent } from 'react';
import './App.css';
class Subject extends Component {
render() {
return (
<header>
<h1>MEOW</h1>
The cat rules the world!
</header>
);
}
}
class TOC extends Component {
render(){
return (
<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>
);
}
}
class Content extends Component {
render() {
return (
<article>
<h2>HTML</h2>
HTML is HyperText Markup Language.
</article>
);
}
}
class App extends Component {
render() {
return (
<div className="App">
<Subject></Subject>
<TOC></TOC>
<Content></Content>
</div>
);
}
}
export default App;
'프론트엔드 상식' 카테고리의 다른 글
| React Event - React 컴포넌트 이벤트 만들기 (0) | 2021.01.12 |
|---|---|
| React State 의 소개와 사용법 (0) | 2021.01.11 |
| React Refactoring 및 components 파일로 분리하기 (0) | 2021.01.11 |
| Node.js,npm,create-react-app 설치, React 실행·배포 (0) | 2021.01.08 |
| React 유래와 장점, 개발 환경 종류 (0) | 2021.01.07 |
