render() {
return <></>
}
JSX
를 리턴.props
나 state
업데이트 시도는 하지 말아야한다. 업데이트는 렌더링 이후에 처리되도록 라이프사이클이 설계되어 있기 때문.componentDidMount() {
// codes..
}
render()
메서드가 실행된 이후 실행되는 메서드.
오직, Mounting
단계에서만 실행되며 Updating
단계에서는 실행되지 않는다.
state
업데이트 코드는 componentDidMount()
에 등록한다.
componentDidMount() {
setTimeOut(() => {
this.setState({ color: 'red' })
}, 2000)
}
render() {
return <h1 style={{color: this.state.color}}>hello world</h1>
}
setTimeOut
함수가 2초 후에 1번째 인자인 콜백 함수르를 실행하도록 했다.
componentDidMount()
는 render
처리 후에 실행되므로 화면에 hello world
텍스트가 나온 후 2초 정도 뒤에 this.setState({ color: 'red' })
가 실행된다.