리액트 컴포넌트에서 데이터는 “props”와 “state” 두 개로 나뉜다.
Props
부모 컴포넌트가 자식 컴포넌트에게 주는 값(자식이름의 태그를 사용)
-
부모 —> 자식으로 내려줌
-
자식 입장에서는 읽기 전용
1.클래스 를 통한 Props 구현 방법
// App.js (부모)
import React, { Component } from 'react';
import MyName from './MyName';
class App extends Component {
render(){
return (
<MyName name="kingso" />
);
}
}
export default App;// MyName.js (자식)
import React, { Component } from 'react';
class MyName extends Component {
static defaultProps = {
name: "default"
}
render(){
return (
<div>안녕하세요. 제 이름은 <b>{this.props.name}</b>입니다.</div>
);
}
}
export default MyName;2.함수 를 통한 Props 구현 방법
// MyName.js (자식)
import React from 'react';
const MyName = ({ name }) => {
return <div>안녕하세요! 제 이름은 <b>{name}</b>입니다.</div>
}
MyName.defaultProps = {
name: "default2"
}
export default MyName;State
자신의 컴포넌트 내부에 선언하고, 내부에서 값을 변경할 수 있다. 변경 시엔, 컴포넌트의 내장함수인 setState()를 사용한다.
1.클래스 를 통한 State 예제
// App.js (부모)
import React, { Component } from 'react';
import Counter from './Counter';
class App extends Component {
render(){
return (
<Counter />
);
}
}
export default App;// Counter.js (자식)
import React, { Component } from 'react';
class Counter extends Component {
state = {
number: 0
}
handlerIncrease = () => {
this.setState({
number: this.state.number + 1
});
}
handlerDecrease = () => {
this.setState({
number: this.state.number - 1
});
}
render(){
return (
<h2>카운터</h2>
<div>값: {this.state.number}</div>
<button onClick={this.handlerIncrease}>+</button>
<button onClick={this.handlerDecrease}>-</button>
);
}
}
export default Counter;클래스형 컴포넌트 vs 함수형 컴포넌트
함수형 컴포넌트
-
초기 마운트 속도가 아주 미세하게 좀 더 빠르다.
-
불필요한 기능이 없기 떄문에, 메모리 자원도 덜 사용한다.
- state, 라이프사이클 기능이 없다.
