1)
App2.js
import React,{ useEffect, useState } from 'react';
const App2 = () => {
const [ count, setCount ] = useState(1);
const [ input, setInput ] = useState("");
// componentDidMount && componentDidUpdate
useEffect(()=>{
console.log('렌더링될 때마다 useEffect호출');
})
// useEffect에 두번째 인자로 []을 넘겨주면 마운트될 때만 호출됨
// componentDidMount
useEffect(()=>{
console.log('처음 마운트될 때만 useEffect호출');
},[])
useEffect(()=>{
console.log('배열요소안의 값이 업데이트되면 useEffect호출');
},[count])
const handleCount = () => {
setCount(count+1);
}
const onChange = (e) => {
setInput(e.target.value);
}
return (
<div>
<button onClick={handleCount}>수정하기</button>
<span>count: {count}</span>
<input onChange={onChange} value={input} />
</div>
);
};
export default App2;
2)
App3.js
import React, { useState } from 'react';
import Timer from './components/Timer';
const App3 = () => {
const [ showTimer, setShowTimer ] = useState(false);
return (
<div>
{ showTimer && <Timer/> }
<button onClick={()=>{ setShowTimer(!showTimer) }}>클릭하세요</button>
</div>
);
};
export default App3;
Timer.js
import React, { useEffect } from 'react';
const Timer = () => {
//Mount할 때 호출 componentDidMount
//UnMount할 때 호출 componentWillUnMount
//Update할 때 호출 componentDidUpdate
useEffect(()=>{
const timer = setInterval(()=>{
console.log('타이머 돌아가는중....');
},1000)
return ()=>{
clearInterval(timer);
}
},[])
return (
<div>
타이머를 실행합니다.
</div>
);
};
export default Timer;
3)
App4.js
import React, { Component, useState, useEffect } from 'react';
const App4 = () => {
//클래스 컴포넌트 보이기
const [ funcShow, setFuncShow ] = useState(true);
return (
<div>
<h1>hello world</h1>
<input type='button' value='클래스 컴포넌트 보이기/안보이기' onClick={()=>setFuncShow(!funcShow)}/>
{ funcShow && <ClassComp initNumber={2}/> }
</div>
);
};
//class컴포넌트 만들기
class ClassComp extends Component {
//state생성
//props값을 state값으로 지정
state = {
number: this.props.initNumber,
date: new Date().toLocaleTimeString(),
}
//렌더가 끝난 다음 실행 사이클 메소드
componentDidMount() {
console.log('class형 컴포넌트 => componentDidMount');
}
//컴포넌트 Unmount되기 직전 실행사이클 메소드
componentWillUnmount() {
console.log('class형 컴포넌트 => componentWillUnmount');
}
render(){
console.log('class형 컴포넌트 => render');
return(
<div className='container'>
<h2>클래스 컴포넌트</h2>
<p>Number : <span>{this.state.number}</span></p>
<p>Date : <span>{this.state.date}</span></p>
</div>
)
}
}
export default App4;
'노력이 좋아서' 카테고리의 다른 글
<step66>'react_styledcomponents' (0) | 2022.06.23 |
---|---|
<step66>'react_scss' (0) | 2022.06.23 |
<step65>'react_todolist실습' (0) | 2022.06.22 |
<step64>'react_배열' (0) | 2022.06.21 |
<step64>'react_event, ref' (0) | 2022.06.21 |