참고사이트
https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi
React - YouTube
www.youtube.com
2020/05/04 - [react/기초] - react 설치, 개발환경구축
2020/05/05 - [react/기초] - react 구조
2020/05/11 - [react/기초] - react 컴포넌트(component) 개념
- react 속성(props) 사용
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class Subject extends Component {
render(){
return (
<header>
<h1>WEB</h1>
world wide web!
</header>
);
}
}
..생략
class App extends Component {
render(){
return (
<div className="App">
<Subject></Subject>
<Nav></Nav>
<Article></Article>
</div>
);
}
}
export default App;
Subject(component)가 재사용성을 획기적으로 높일려면 어떻게 해야할까?
위의 <header>의 WEB, world wide web는 고정된 값이 아닌 속성(props)으로 바꿀수 있다.
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class Subject extends Component {
render(){
return (
<header>
<h1>{this.props.title}</h1>
{this.props.sub}
</header>
);
}
}
..생략
class App extends Component {
render(){
return (
<div className="App">
<Subject title="WEB" sub="world wide web!"></Subject>
<Nav></Nav>
<Article></Article>
</div>
);
}
}
export default App;
class App에 <Subject title, sub>를 만들어주고, class Subject에서 jsx문법 {this.props.title} 처럼 사용한다.
* 자바스크립트에서는 속성을 attribute라고 하지만, 리액트에서는 props라고 칭한다.
- react Developer Tools
crome 확장프로그램 설치
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
React Developer Tools
Adds React debugging tools to the Chrome Developer Tools. Created from revision 6cceaeb67 on 3/26/2020.
chrome.google.com
개발자 도구에서 화면에서 사용중인 component를 확인할 수 있다.
'dev > react' 카테고리의 다른 글
react 이벤트 (0) | 2020.05.17 |
---|---|
react state소개 및 사용 (0) | 2020.05.15 |
react 컴포넌트(component) 개념 (0) | 2020.05.11 |
react 구조 (0) | 2020.05.05 |
react 설치, 개발환경구축 (0) | 2020.05.04 |