반응형
0,1 섹션은 어떻게 공부할 지와 환경설정에 대한 내용이라 블로깅은 건너 뛰었습니당.
1. 리액트의 중요성
- 유지보수 좋음
- 코드의 복잡성 제거
- 성능 향상
...
2. 컴포넌트 생성
- React의 핵심 기능
- 긴 코드들을 사용자 정의 태그로 간결하게 만들기 위함
- 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>- App.js
- header, nav, article 태그 부분 사용자 태그로 바꿔주기
import React, {Component} from 'React';
import './App.css';
// html에서 <header>태그 부분들을 subject라는 이름으로 바꾸고 싶다.
// 클래스 이름 첫 글자는 대문자로 작성하기!
class Subject extends Component { // 대문자로 이름 시작해야함
render() { // 반드시 render 함수가 있어야함
// 자바 스크립트에서 클래스 안에 있는 함수는 function 안붙여도 됨.
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>
);
}
}
class App extends Component { // Component 생성 코드
render() {
return (
<div className="App"> // 하나의 최상위 태그만 써야한다. (여기선 div)
<Subject></Subject> // 이렇게 하면 리액트 코드에서는 우리가 설정한대로 보이지만 웹 브라우저가 읽을땐 <header>태그 부분 내용들로 읽는다.
<TOC></TOC>
<Content></Content>
</div>
);
}
}
export default App;3. props
- 컴포넌트를 사용할 때 값을 동적으로 하고 싶을 때 props가 사용된다.
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">
<Subject title="WEB" sub="world wide web!></Subject>
// title의 값과 sub의 값이 입력값이 되어서 이에 따라 달라지는 출력값을 화면에 표시
<TOC></TOC>
<Content title="HTML" desc="HTML is HyperText Markup Language."></Content>
</div>
);
}
}4. 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 (./components/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 (./components/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 (./components/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 컴포넌트 제작 (0) | 2023.05.25 |
|---|---|
| [2023 신입부원 심화 스터디] 박지민 #5주차 React.js 섹션 2 컴포넌트 제작 (0) | 2023.05.25 |
| [2023 신입부원 기초 스터디] 도승준 4주차 -JS는 사실 ... JavaScript의 약자이다 (2) | 2023.05.18 |
| [2023 신입부원 기초 스터디] 박승환 #4주차- js야 안녕!!^^ (0) | 2023.05.18 |
| [2023 신입부원 기초 스터디] 이총명 5주차 - JS 입문 (1) | 2023.05.18 |
