리액트 교과서 chapter05
(React 컴포넌트의 라이프사이클 이벤트)
React는 라이브 사이클 이벤트를 기반으로 컴포넌트의 동작을 제어하고 사용자 정의 할 수 있다.
- 마운팅 이벤트: React 엘리먼트를 DOM노드에 추가할 때 발생
- 갱신이벤트: 속성이나 상태가 변경되어 React 엘리머트를 갱신할 때 발생
- 언마운팅 이벤트 : React 엘리먼트가 DOM에서 제거될 때 발생
마운팅과 언마운팅의 경우 DOM의 추가, 삭제 과정에 동작하므로 1번만 동작하며, 갱신은 상태의 변경에 따라 동작하기 때문에 여러번 동작 될 수 있다.
- contructor: 상태의 초기화 시 사용 된다.
- 마운팅
- componentWillMount(): DOM에 삽입 전에 실행된다.
- componentDidMount(): DOM에 삽입 후에 실행된다.
- 갱신
- componentWillReceiveProps(nextProps): 컴포넌트가 속성을 받기 직전에 실행
- shoudComponentUpdate(nextProps, nextState): 컴포넌트가 갱신되는 조건을 정의해서 재랜더링을 최적화 할 수 있다. boolean 값을 반환
- componentWillUpdate(nextProps, nextState): 컴포넌트가 갱신되기 직전에 실행된다.
- componentDidUpdate(prevProps, prevState): 컴포넌트가 갱신된 후에 실행된다.
- 언마운팅
- componentWillUnmount(): DOM에서 제거하기 전 실행되며, 구독한 이벤트를 제거하거나 다른 정리작업에 수행 할 수 있다.
라이프 사이클의 사용 및 관찰
class Clock extends React.Component {
constructor(props) {
super(props)
this.launchClock()
this.state = {
currentTime : (new Date()).toLocaleString('kr'),
testState : 'testState',
counter : 0
}
}
launchClock() {
setInterval(() => {
this.setState({
currentTime: (new Date()).toLocaleString('kr'),
counter: ++this.state.counter
})
}, 1000)
}
render () {
if (this.state.counter > 2) {
return <Logger time={this.state.currentTime}></Logger>
}
}
}
class Logger extends React.Component {
constructor (props) {
super(props)
console.log('constructor 실행')
}
componentWillUnmount() {
console.log('componentWillUnmount 실행')
}
componentDidMount() {
console.log('componentDidMount 실행')
}
componentWillReceiveProps(nextProps) {
console.log('componentWillReceiveProps 실행')
console.log('새로운 속성', nextProps)
}
shoudComponentUpdate(nextProps, nextState) {
console.log('shoudComponentUpdate 실행')
console.log('새로운 속성', nextProps)
console.log('새로운 상태', nextState)
}
componentWillUpdate(nextProps, nextState){
console.log('componentWillUpdate 실행')
console.log('새로운 속성', nextProps)
console.log('새로운 상태', nextState)
}
componentDidUpdate(prevProps, prevState){
console.log('componentDidUpdate 실행')
console.log('이전 속성', prevProps)
console.log('이전 상태', prevState)
}
componentWillUnmount(){
console.log('componentWillUnmount 실행')
}
render () {
return <div>{this.props.time}</div>
}
} componentDidMount의 활용
기본적인 템플릿이 mount 된 뒤 데이터 조회
class UserList extends React.Component {
constructor(props) {
super(props)
this.state = {
userList : [{id: '1', username:'1'}]
}
}
componentDidMount() {
this.getUserList()
}
getUserList() {
fetch('https://jsonplaceholder.typicode.com/users/')
.then((response) => {return response.json()})
.then((users) => {
this.setState({userList : users})
})
}
render() {
return <div>
<table>
<tbody>
{this.state.userList
.map((user) =>
<tr key={user.id} id={user.id}>
<td>{user.username}</td>
<td>{user.email}</td>
</tr>
)}
</tbody>
</table>
</div>
}
}
https://github.com/Kmmanki/react_note/tree/master/chapter05
GitHub - Kmmanki/react_note: 리액트 교과서 따라하기
리액트 교과서 따라하기. Contribute to Kmmanki/react_note development by creating an account on GitHub.
github.com
'웹 정리 > 리액트' 카테고리의 다른 글
| 리액트 교과서 Chapter07(React에서 폼 다루기) (0) | 2024.03.06 |
|---|---|
| 리액트 교과서 Chapter06(이벤트 다루기) (0) | 2024.02.29 |
| 리액트 교과서 Chapter04(React 컴포넌트의 상태) (0) | 2024.02.27 |
| 리액트 교과서 Chapter03 (JSX) (0) | 2024.02.27 |
| 리액트 교과서 Chapter02(리액트 첫걸음) (0) | 2024.02.20 |
