react의 인프라라고 할 수 있는 컴포넌트 패턴익히기 위한 챕터
https://www.youtube.com/watch?v=QG4RxNHz-bc&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=10
1. 이번 챕터의 목적
컴포넌트를 만드는 패턴을 확실히 내제화 시키기
2. 구현하고자하는 기본 구조 만들기
puer.html
<html>
<body>
<header>
<h1>WEB</h1>
world wide web !
</header>
<nav>
<ul>
<li><a href="1.html"></a> HTML</li>
<li><a href="2.html"></a> CSS</li>
<li><a href="3.html"></a> JS</li>
</ul>
</nav>
<article>
<h2> HTML </h2>
HTML is HyperText
</article>
</body>
</html>
3. puer.html to react
app.js에서 컴포넌트를 활용해서 puer.html 와 동일한 페이지 구성하기
app.js
import React, {Component} from 'react';
import './App.css';
//*컴포넌트들이 '들어가는(나열되는)' 영역
class App extends Component{
render(){
return (
<div className="App">
<Subject></Subject>
<Navigation></Navigation>
<Contents></Contents>
</div>
);
}
}
//컴포넌트(사용자정의 테그)를 만드는 코드영역
class Subject extends Component{
//class 안에서는 function을 생략할 수 있다.
render(){
return(
<header>
<h1>WEB</h1>
world wide web !
</header>
);
}
}
//컴포넌트(사용자정의 테그)를 만드는 코드영역
class Navigation extends Component{
//class 안에서는 function을 생략할 수 있다.
render(){
return(
<nav>
<ul>
<li><a href="1.html"></a> HTML</li>
<li><a href="2.html"></a> CSS</li>
<li><a href="3.html"></a> JS</li>
</ul>
</nav>
);
}
}
//컴포넌트(사용자정의 테그)를 만드는 코드영역
class Contents extends Component{
//class 안에서는 function을 생략할 수 있다.
render(){
return(
<article>
<h2> HTML </h2>
HTML is HyperText
</article>
);
}
}
export default App;
참고) 아래 코드는, 페이스북에서 만든 JSX 언어 영역으로 이 부분을 react가 JS로 수정해서 처리한다.
<div className="App">
<Subject></Subject>
<Navigation></Navigation>
<Contents></Contents>
</div>
4. 배움의 효과
이러한 과정을 통해, 컴포넌트의 이름에만 집중할 수 있게 함으로써 복잡도를 획기적으로 낮춰준다.
'새로워지기 > 서른의 생활코딩' 카테고리의 다른 글
| [생활코딩 따라가기] React 15 props와 state (0) | 2019.05.26 |
|---|---|
| [생활코딩 따라가기] React 12~14 deep dive컴포넌트 (0) | 2019.05.26 |
| [생활코딩 따라가기] React 7~9.샘플 웹앱 배포 (0) | 2019.05.26 |
| [생활코딩 따라가기] React 1~6.샘플 웹앱 실행 (0) | 2019.05.01 |
| [생활코딩 따라가기] javascript 객체 지향 프로그래밍_14 생성자를 통한 상속 (0) | 2019.05.01 |
댓글