App.js
파일 안에 class 이름과 함께 Component 정의
class Subject extends Component {
}
render() {}
함수 필수로 생성
class Subject extends Component {
render() {
}
}
return
작성
class Subject extends Component {
render() {
return (
<header>
<h1>WEB</h1>
World Wide WEB!!
</header>
);
}
}
App.js
에서 Component
를 생성하기 위해 작성한 코드는 JS가 아니라 JS와 유사해 보이는 JSXComponent
는 복잡도를 줄여준다.Component
를 다른 프로젝트에도 동일하게 사용할 수 있다.Props는 속성(attribute)과 같은 역할을 한다.
import logo from './logo.svg';
import './App.css';
import { Component } from 'react';
class Subject extends Component {
render() {
return (
<header>
<h1>{this.props.title}</h1>
{this.props.sub}
</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>{this.props.title}</h2>
{this.props.desc}
</article>
)
}
}
class App extends Component {
render() {
return (
<div className="App">
<Subject title="YAY" sub="React!"></Subject>
<TOC></TOC>
<Content title="HTML" desc="HTML is HyperText Markup Language."></Content>
</div>
);
}
}
export default App;
props
는 확장성에 기여한다.새 JS 파일 생성
새로 생성한 JS 파일에 class 작성
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>
)
}
}
Component
를 import
import { Component } from 'react';
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>
)
}
}
해당 JS파일을 외부에서 사용할 수 있도록 export문 작성
import { Component } from 'react';
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>
)
}
}
export default TOC;
분리한 Component를 사용할 JS파일에서 불러오는 코드 작성
import TOC from "./components/TOC";
class App extends Component {
constructor(props) {
super(props);
this.state = {
subject:{title:'WEB', sub:'World Wide Web'}
}
}
render() {
return (
<div className="App">
<Subject title={this.state.subject.title} sub={this.state.subject.sub}></Subject>
<TOC></TOC>
<Content title="HTML" desc="HTML is HyperText Markup Language."></Content>
</div>
);
}
}
constructor
: Component가 실행될 때 가장 먼저 실행되어서 초기화를 담당하는 함수this.state
내부에서 설정한 props값을 해당 props값을 받아서 보여줄 하위 Component의 props값으로 지정해서 사용class App extends Component {
constructor(props) {
super(props);
this.state = {
subject:{title:'WEB', sub:'World Wide Web'},
contentsclass App extends Component {
constructor(props) {
super(props);
this.state = {
subject:{title:'WEB', sub:'World Wide Web'},
contents:[
{id:1, title:'HTML', desc:'HTML is HyperText Markup Language'},
{id:2, title:'CSS', desc:'CSS is for design'},
{id:3, title:'JavaScript', desc:'JavaScript is for interactive'}
]
}
}
render() {
return (
<div className="App">
<Subject title={this.state.subject.title} sub={this.state.subject.sub}></Subject>
<TOC data={this.state.contents}></TOC>
<Content title="HTML" desc="HTML is HyperText Markup Language."></Content>
</div>
);
}
}
}
}
render() {
return (
<div className="App">
<Subject title={this.state.subject.title} sub={this.state.subject.sub}></Subject>
<TOC></TOC>
<Content title="HTML" desc="HTML is HyperText Markup Language."></Content>
</div>
);
}
}
class TOC extends Component {
render() {
var lists = [];
var data = this.props.data
var i = 0;
while(i < data.length) {
lists.push(<li><a href={"/content/"+data[i].id}>{data[i].title}</a></li>)
i = i+1;
}
return (
<nav>
<ul>
{lists}
</ul>
</nav>
)
}
}
하지만 이 경우에는 에러없이 작동은 되지만,
Console
에서는 Warning: Each child in a list should have a unique "key" prop. 라는 경고문이 뜬다.
class TOC extends Component {
render() {
var lists = [];
var data = this.props.data
var i = 0;
while(i < data.length) {
lists.push(<li key={data[i].id}><a href={"/content/"+data[i].id}>{data[i].title}</a></li>)
i = i+1;
}
return (
<nav>
<ul>
{lists}
</ul>
</nav>
)
}
}
key
값이 필요하다.