카테고리 없음
2023.04.12
OnejinSim
2023. 4. 12. 17:41
.
//import './App.css';
import { Component } from 'react';
import StateExample from './03/StateExample';
import Mypage from './03/Mypage';
import Login from './03/Login';
import LifecycleExample from './03/LifecycleExample';
import NewCounter from './03/NewCounter';
import Exam from './03/Exam3_9';
class App extends Component {
constructor(props){
super(props);
this.state = {count : 0}
this.resetCount = this.resetCount.bind(this);
}
//getD로 count초기화선언 버튼눌러 다시 선언
resetCount(){
this.setState(({count}) => ({count: count + 10}));
}
setCount(){//왜 안될까
this.setState({
count : 0,
});
}
render(){
return(
<div>
<NewCounter count={this.state.count}/>
<button onClick={this.resetCount}>{this.state.count+10}으로 초기화</button>
<button onClick={this.setCount}>0으로 초기화</button>
<hr></hr>
<h1>부모 컴포넌트</h1>
<Exam value={10} parent={100}></Exam>
</div>
);
}
}
export default App;
.
import React, { Component } from 'react';
class Exam3_9 extends Component {
constructor(props){
super(props);
this.state = {
mine: 200,
tmp: 1,
};
this.handleData = this.handleData.bind(this);
setInterval(this.handleData,20000);
}
handleData(props){
const {parent} = props;
this.setState({
tmp: parent
});
console.log(this.state.parent);
}
static getDerivedStateFromProps(props, state){
const {parent} = props;
return {
parent,
};
}
render() {
return <div>State에 저장된 값:{this.state.tmp}</div>
}
}
export default Exam3_9;
.
.
.
import React, { Component } from 'react';
class LifecycleExample extends Component {
static getDerivedStateFromProps(props, state){
console.log('getDerviedStateFromProps 호출', props, state);
return {StateName: props.name}; // 요게 state값이 됨
}
constructor(props){
super(props);
//getDer...함수를 사용하므오 경고메시지를 거너뛰기위해 state초기값을 설정합니다.
this.state={};
console.log('constructor 호출', props);
}
componentDidMount(){
console.log('componentDidMount 호출');
this.setState({update: true});
//this.forceUpdate();
}
componentDidUpdate(){
console.log('componentDidUpdate 호출');
}
componentWillUnmount(){
console.log('componentWillUnmount 호출');
}
getSnapshotBeforeUpdate(){
console.log('getSnapshotBeforeUpdate 호출');
return {};
}
shouldComponentUpdate(){
console.log('shouldComponentUpdate 호출');
return false;
}
render() {
console.log('render 호출', this.props, this.state);
return null;
return (
<div>state: {this.state.neme}</div>
);
}
}
export default LifecycleExample;
.
//import './App.css';
import { Component } from 'react';
import StateExample from './03/StateExample';
import Mypage from './03/Mypage';
import Login from './03/Login';
import LifecycleExample from './03/LifecycleExample';
import NewCounter from './03/NewCounter';
class App extends Component {
constructor(props){
super(props);
this.state = {count : 0}
this.resetCount = this.resetCount.bind(this);
}
resetCount(){
this.setState(({count}) => ({count: count + 10}));
}
setCount(){
const { newCount } = this.state;
this.setState({newCount: newCount = 2,});
}
render(){
return(
<div>
<NewCounter count={this.state.count}/>
<button onClick={this.resetCount}>{this.state.count+10}으로 초기화</button>
<button onClick={this.setCount}>0으로 초기화</button>
</div>
);
}
}
export default App;
import React, { Component } from 'react';
class NewCounter extends Component {
constructor(props){
super(props);
this.state = {};
this.increaseCount = this.increaseCount.bind(this);
}
static getDerivedStateFromProps(props, state){
const { count } = props;
return {
reset:0,
count,
newCount: count === state.count
//
? state.newCount
//
:count,
}
}
increaseCount(){
this.setState(({ newCount }) => ({
newCount: newCount + 1
}));
}
render() {
return (
<div>
현재 카운트: {this.state.newCount}
<button onClick={this.increaseCount}>카운트 증가</button>
</div>
);
}
}
export default NewCounter;