1. Component란
Component는 쉽게 생각하면
레고로 생각할 수 있습니다 각 레고블럭 (component)들을 합쳐 한 페이지를 그릴 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<header>
...
</header>
<div class="container">
<div id="image-banner">
...
</div>
<div id="contents-1">
...
</div>
</div>
<footer>
...
</footer>
</body>
</html>header, container, footer의 세 개의 컴포넌트를 합쳐 한 페이지를 보여줄 수 있습니다.
2. State, Props
Component에서 데이터를 관리하기 위해 사용되는
state,props를 사용합니다.
1) state
- state는 Component가 가지고 있는 데이터 입니다.
- state는 한 컨포넌트에서만 사용하는 정보를 주로 넣고 생성, 수정하는 데이터 입니다.
- 생성 수정도 오직 해당 컴포넌트 내에서만 이뤄집니다.
2) props
- props는 Component가 부모 Component로부터 받아온 데이터 입니다.
- 부모 컴포넌트로부터 전달 받은 데이터를 props라고 합니다.
- Props로 받은 데이터는 수정할 수 없습니다.(내게 아닌 부모 데이터이기때문에)
3. 함수형 컴포넌트
// 리액트 패키지를 불러옵니다.
import React from 'react';
const BucketList = (props) => {
return (
<div>
버킷 리스트
</div>
);
}
export default BucketList;4. 클래스형 컴포넌트
import React from 'react';
import logo from './logo.svg';
import './App.css';
import BucketList from './BucketList';
// 클래스형 컴포넌트
class App extends React.Component {
constructor(props){
super(props);
this.state = {
list: ['영화관 가기', '매일 책읽기', '수영 배우기'],
};
}
render() {
return (
<div className="App">
<h1>내 버킷리스트</h1>
<BucketList/>
</div>
);
}
}
export default App;