Component Lifecycle

• Component Lifecycle
  • 리액트 컴포넌트는 탄생부터 죽음까지 여러지점에서 개발자가 작업이 가능하도록 메서드를 오버라이딩 할 수 있게 해준다.
  • Declarative(디클레러티브)
    

Initialization	Mounting	Updation	Unmounting
Constructor(생김)	render(브라우저에 그려짐)	변경	사라진 후

------16.3버젼 이전
-> constructor

-> componentWillMount(랜더 전) -> getDerivedStateFromProps

-> render(최초 랜더)

-> componentDidMount(랜더 후)

// 내용에 따라 스크롤 따라 내려가기
let i = 0
class App extends React.Component {
  state = {
    list: []
  } ;
  
  render() {
    return (
      <div id='list' style={{height:100, overflow:'scroll'}}>
        {this.state.list.map( (i) => {
          return <div>{i}</div> 
        })}
      </div>
    )
  }
  componentDidMount() {
    setInterval(() => {
      this.setState(state => ({
        list : [...state.list, i++] 
      }))
    }, 1000)
    
  }
  
  getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevState.list.length === this.state.list.length) return null
    const list = document.querySelector('#list')
    return list.scrollHeight - list.scrollTop;
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log(snapshot)
    if (snapshot === null ) return;
    const list = document.querySelector('#list');
    list.scrollTop = list.scrollHeight - snapshot;
  }
  
}

ReactDOM.render(<App name = 'Mark'/> , document.querySelector('#root'))

Component 에러 캐치