Component (1)
Component
- Component → 웹 사이트의 조각
→ 웹 사이트를 잘 조각낼 줄 아는 사람 === 리액트를 잘 쓰는 사람
State, Props
state
Component가 가지고 있는 데이터
한 컴포넌트에서만 사용하는 정보를 주로 넣어놓고 생성, 수정하는 데이터
생성도 수정도 오직 해당 컴포넌트 내에서만 이뤄줘야 한다.
생성, 수정 자유롭다.
props
Component가 부모 Component로부터 받아온 데이터
props로 받은 데이터는 마음대로 생성하거나 수정할 수 없다.
리액트 코딩 룰
폴더는 소문자로 시작하는 카멜케이스를 사용!
JS파일, 컴포넌트 이름은 대문자로 시작하는 카멜케이스를 사용!
Component (2)
함수형 Component (ReactStudy.js)
import React from 'react';
function ReactStudy(props) {
return (
<div>리액트😎</div>
);
}
const ReactStudy = (props) => {
return (
<div>
리액트😎
</div>
);
}
export default ReactStudy;
컴포넌트 불러오기 (App.js)
import React from 'react';
import ReactStudy from './ReactStudy';
function App() {
return (
<div>
<h1>리액트😎</h1>
{}
<ReactStudy/>
</div>
);
}
export default App;
Component(3)
클래스형 Component
App.js를 클래스형으로 바꾸고, ReactStudy 컴포넌트에 데이터를 넘겨주기
import React from 'react';
import ReactStudy from './ReactStudy';
class App extends React.Component {
constructor(props){
super(props);
this.state = {
list: ['산책하기', '낮잠자기', '공부하기'],
};
}
render() {
return (
<div className="App">
<h1>리액트😎</h1>
{}
<ReactStudy/>
</div>
);
}
}
export default App;
Component에서 Component로 데이터를 넘겨주기
- App 컴포넌트가 가지고 있는 state를 ReactStudy에 넘겨주기
함수형 컴포넌트에는 state가 없다.
state 값 사용하기
render() {
console.log(this.state);
}
→ list: ["산책하기", "낮잠자기", "공부하기"]
render() {
console.log(this.state);
return (
<div className="App">
<h1>리액트😎</h1>
{}
{}
<ReactStudy list={this.state.list}/>
</div>
);
}
const ReactStudy = (props) => {
console.log(props);
return (
<div>
리액트😎
</div>
);
}