Joon's Space
[React] Component, Props, State (생활코딩) 본문
1. Component
1.1 Component를 사용하는 이유?
-> 리액트는 HTML 태그 구조를 각 Component 로 분리하는데, 이렇게 하면 중복 코드들을 최소화시키고, 유지보수도 용이하게 해 준다. (객체지향 언어의 특징)
<pure.html>
<html>
<body>
<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>
</body>
</html>다음과 같은 pure.html 을 react에서 HTML semantic 태그들 (header, nav, article, etc)을 각 class Component로 App.js 에 생성해준다.
1.2 Component 기본 생성법 (기본 구조)
class Hello extends Component {
render() {
return (
<h1>
Hello!
</h1>
);
}
}Component는 위와같은 기본구조를 갖고 있는데, render라는 함수의 return 안에 각 HTML 코드들을 삽입해 주면 이 Component를 export 할 class App 컴포넌트 안에서 사용할 수 있다. 이 외에도 function으로도 Component를 생성할 수 있지만 강의에선 class를 사용하였다.
<App.js>
import React, { Component } from 'react'; // 리액트의 모듈을 import 해준다.
import './App.css';
class Subject extends Component { // header 부분
render() {
return (
<header>
<h1>WEB</h1>
world wide web!
</header>
);
}
}
class TOC extends Component { // nav 부분
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 { // article 부분
render() {
return (
<article>
<h2>HTML</h2>
HTML is HyperText Markup Language.
</article>
);
}
}
class App extends Component { // 이 부분이 index.html 에 들어갈 부분
render() {
return (
<div className="App">
<Subject></Subject>
<TOC></TOC>
<Content></Content>
</div>
);
}
}
export default App;
1.3 Component 분리하기
- Component 들을 App.js 에 모두 붙여놓으면 코드가 너무 길고 복잡해 질 수 있으므로, 컴포넌트들을 각각 하나의 파일에 나누어서 사용하기로 한다. 각 component 들을
ex)
<TOC.js>
import React, { 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;
<Contents.js>
import React, { Component } from 'react';
class Content extends Component {
render() {
return (
<article>
<h2>{this.props.title}</h2>
{this.props.desc}
</article>
);
}
}
export default Content;
<Subject.js>
import React, { Component } from 'react';
class Subject extends Component {
render() {
return (
<header>
<h1>{this.props.title}</h1>
{this.props.sub}
</header>
);
}
}
export default Subject
<App.js>
import React, { Component } from 'react';
import Subject from "./components/Subject";
import Content from "./components/Contents";
import TOC from "./components/TOC";
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<Subject title="WEB" sub="world wide web!"></Subject>
<Subject title="React" sub="For UI"></Subject>
<TOC></TOC>
<Content title="HTML" desc="HTML is HyperText Language."></Content>
</div>
);
}
}
export default App;
각 Component 파일들은 App.js 에서처럼 필요한 모듈들을 import하고, 외부에서 사용할 수 있도록 export 해준다. (중요)
그런 다음, App.js 에서 사용할 component 의 경로를 입력하여 component의 class 이름으로 import 해주어 사용한다.
다음 나오는 두가지 개념 props, state는 component에서 사용하는 데이터의 종류들이다. 각 데이터의 사용 용도에 따라 props을 사용하기도 하고, state를 사용하기도 한다.
2. Props
- 부모 component가 자식 component에게 값을 전달할 때 사용하는 것. (state와 달리 값을 변경할 수 없음)
2.1 props 사용 방법 예
<Subject.js>
import React, { Component } from 'react';
class Subject extends Component {
render() {
return (
<header>
<h1>{this.props.title}</h1> // this는 자기자신이고 외부에서 이 Subject Component를 사용할 때, title의 값을 받아옴
{this.props.sub}
</header>
);
}
}
export default Subject<App.js>
import React, { Component } from 'react';
import Subject from "./components/Subject";
import Content from "./components/Contents";
import TOC from "./components/TOC";
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<Subject title="WEB" sub="world wide web!"></Subject>
<Subject title="React" sub="For UI"></Subject>
<TOC></TOC>
<Content title="HTML" desc="HTML is HyperText Language."></Content>
</div>
);
}
}
export default App;
className App div 안에서 각 Component를 사용할 때, 변수="값"을 입력해주면, 자식 Component HTML 태그에서 그 변수에 해당하는 위치에 값이 들어가게 된다.
3. State
- 읽기 전용 데이터인 props 와 달리 state는 component 안에서 mutable 하게 사용이 가능하다.
3.1 state 사용하기
<app.js>
class App extends Component {
constructor(props){ // component가 실행될 때 constructor함수가 제일 먼저 실행되어서 초기화를 담당
super(props);
this.state = {
mode:'read',
subject:{title:'WEB', sub:'World Wide Web!'},
welcome:{title:'Welcome', desc:'Hello, React!!'},
contents:[
{id:1, title:'HTML', desc:'HTML is for information'},
{id:2, title:'CSS', desc:'CSS is for design'},
{id:3, title:'JavaSciprt', desc:'JavaScript is for interactive'}
]
}
}
render() {
console.log('App render');
var _title, _desc = null;
if(this.state.mode === 'welcome'){
_title = this.state.welcome.title;
_desc = this.state.welcome.desc;
} else if(this.state.mode === 'read'){
_title = this.state.contents[0].title;
_desc = this.state.contents[0].desc;
}
return (
<div className="App">
<Subject
title={this.state.subject.title}
sub={this.state.subject.sub}>
</Subject>
<TOC data={this.state.contents}></TOC>
<Content title={_title} desc={_desc}></Content>
</div>
);
}
}state는 constructor 함수는 component가 실행되면 제일 먼저 실행되어 state를 초기화한다. 그리고 super(props)는 습관적으로 적어주는데, 그 이유는 자바스크립트에서 super 를 호출하기 전에는 thisthis를 사용할 수 없기 때문.
'Web > React' 카테고리의 다른 글
| [React] authentication front-end (log-in, create account, etc) (0) | 2021.07.28 |
|---|---|
| [TailwindCSS, Apollo GraphQL] frontend setup (0) | 2021.07.26 |
| [React] React Hooks (useState) 1 (0) | 2021.07.18 |
| [React] state 변경하기 (bind, setState 함수) (0) | 2021.05.09 |
| [React] 개발 환경 구축하기 (0) | 2021.05.03 |
