반응형
1. 컴포넌트 만들기
- React의 핵심 기능 - 긴 코드들을 사용자 정의 태그를 사용하여 간결하게 만듦
- pure.index
<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>
- App.js
- header, nav, article 태그 부분 사용자 태그로 바꿔줌
import React, {Component} from 'React';
import './App.css';
// html에서 <header>태그 부분을 subject라는 이름으로 바꾸고 싶음
class Subject extends Component { // 클래스 이름은 대문자로 시작
// 자바 스크립트에서 클래스 안에 있는 함수는 function 안붙여도 됨
render() { // 반드시 render 함수가 있어야 함
return (
<header> // 반드시 하나의 최상위 태그로 시작해야 함 - 여기서는 header
<h1>WEB</h1>
world wide web!
</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>
);
}
}
// Component 생성 코드
class App extends Component {
render() {
return (
<div className="App"> // 하나의 최상위 태그만 써야 함 - 여기서는 div
<Subject></Subject> // 코드에서는 사용자가 설정한대로 보이지만 웹 브라우저는 <header>태그 부분 내용들로 보임
<TOC></TOC>
<Content></Content>
</div>
);
}
}
export default App;
2. props
- 컴포넌트를 사용할 때 값을 동적으로 하고 싶을 때 props 사용
- App.js
class Subject extends Component {
render() {
return (
<header>
<h1>{this.props.title}</h1>
{this.props.sub}
</header>
);
}
}
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">
// title의 값과 sub의 값이 입력값 -> 이에 따라 출력값이 달라짐 -> 화면에 표시
<Subject title="WEB" sub="world wide web!></Subject>
<TOC></TOC>
<Content title="HTML" desc="HTML is HyperText Markup Language."></Content>
</div>
);
}
}
3. Component 파일로 분리하기
- App.js
import React, {Component} from 'React';
import TOC from "./components/TOC"; // TOC.js의 TOC 컴포넌트 이용
import Subject from "./components/Subject"; // Subject.js의 Subject 컴포넌트 이용
import Content from "./components/Content"; // Content.js의 Subject 컴포넌트 이용
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<Subject></Subject>
<TOC></TOC>
<Content></Content>
</div>
);
}
}
export default App;
- 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; // 외부에서 사용 가능
- Subject.js
import React, {Component} from 'React';
class Subject extends Component {
render() {
return (
<header>
<h1>WEB</h1>
world wide web!
</header>
);
}
}
export default Subject; // 외부에서 사용 가능
- Content.js
import React, {Component} from 'React';
class Content extends Component {
render() {
return (
<article>
<h2>HTML</h2>
HTML is HyperText Markup Language.
</article>
);
}
}
export default Content; // 외부에서 사용 가능반응형
'WINK-(Web & App) > HTML & CSS & JS 스터디' 카테고리의 다른 글
| [2023 신입부원 심화 스터디] 황현진 #5주차 - React.js 섹션 2. 컴포넌트 제작 (1) | 2023.05.25 |
|---|---|
| [2023 신입부원 심화 스터디] 이정욱 #5주차 React.js ~ 섹션2 컴포넌트 제작 (0) | 2023.05.25 |
| [2023 신입부원 심화 스터디] 신진욱 #5주차 - 어 리액트 왔어 (0) | 2023.05.25 |
| [2023 신입부원 기초 스터디] 도승준 4주차 -JS는 사실 ... JavaScript의 약자이다 (2) | 2023.05.18 |
| [2023 신입부원 기초 스터디] 박승환 #4주차- js야 안녕!!^^ (0) | 2023.05.18 |
