16.3v이후 라이프 사이클에 대해 알아보자
똑같이 스크립트 버전에 다지우고 복사 붙여넣기하자
let i=0;
class Com extends React.Component{
state={
list:[]
};
interval=null;
constructor(props){
super(props);
console.log('constructor')
};
render(){
console.log('render')
return (
<div id="list" style={{height:100,overflow:"scroll"}}>
{this.state.list.map((i)=>{
return <div>{i}</div>;
})}
</div>);
};
static getDerivedStateFromProps(nextProps,prevState){
console.log('componentWillMount',"componentWillReceiveProps","getDerivedStateFromProps");
return null;
};
componentDidMount(){
console.log('componentDidMount');
setInterval(() => {
this.setState(state=>({
list: [...state.list,i++]
}));
}, 1000);
};
shouldComponenetUpdate(nextprops,nextstate){
console.log("shouldComponenetUpdate",nextprops,nextstate)
return true;
};
getSnapshotBeforeUpdate(preprops,prestate){
console.log("componentWillUpdate","getSnapshotBeforeUpdate");
if(prestate.list===this.state.list)return null;
const lister=document.querySelector("#list");
console.log(lister.scrollHeight-lister.scrollTop)
return lister.scrollHeight-lister.scrollTop;
};
componentDidUpdate(preprops,prestate,snapshot){
console.log("componentDidUpdate");
if(snapshot===null)return;
const lister=document.querySelector("#list");
lister.scrollTop=lister.scrollHeight-snapshot
};
componentWillUnmount(){
console.log("componentWillUnmount")
}
}
ReactDOM.render(<Com />,document.querySelector('#root'))
npx serve로 localhost를 켜주면 사진에서 숫자가 한개씩 늘어날것이다
위에 코드는 화면에 한줄씩 숫자를 순서대로 나타내고 높이가 100을 넘어가면 스크롤로 만들고 스크롤이 항상 최하단에 있게 설계되어있다.
우선 라이프 사이클에서 변경된 부분을 알아보자
componentWillMount,componentWillReceiveProps이두개가 getDerivedStateFromProps로 합쳐졌다
componentWillUpdate 가getSnapshotBeforeUpdate로 바뀌었다.
그럼 우선 어떤순순서로 실행되는지 알아보자
localhost창으로 가서 ctrl+shift+i를 눌러보자
콘솔창이 뜨고 이렇게 나올것이다
constructor-> getDerivedStateFromProps->render->componentDidMount->(getDerivedStateFromProps
->render->getSnapshotBeforeUpdate->componentDidUpdate)반복
생성자->getDerivedStateFromProps(componentWillMount)->render->componentDidMount->(getDerivedStateFromProps(componentWillReceiveProps)->
render->getSnapshotBeforeUpdate(componentWillUpdate)->componentDidUpdate)반복
이런식으로 변환이 됬다고 보면 될것이다. 이제 코드내부에서 처음보는 것들을 정리해보자
1.const lister=document.querySelector("#list");
이거는 어떤공간이지를 알려주는것을 lister라는 변수에 저장한것이다.
2. return lister.scrollHeight-lister.scrollTop;
lister.scrollHeight 스코롤 할수있는 공간의 총 높이를 나타내고
lister.scrollTop 이거는 현재 스크롤바의 위치를 알려준다.
3.
getSnapshotBeforeUpdate(preprops,prestate){
console.log("componentWillUpdate","getSnapshotBeforeUpdate");
if(prestate.list===this.state.list)return null;
const lister=document.querySelector("#list");
console.log(lister.scrollHeight-lister.scrollTop)
return lister.scrollHeight-lister.scrollTop;
};
여기서 중요한것은 return에 있는값을 4번에 전달해준다.
4. componentDidUpdate(preprops,prestate,snapshot){
console.log("componentDidUpdate");
if(snapshot===null)return;
const lister=document.querySelector("#list");
lister.scrollTop=lister.scrollHeight-snapshot
};
snapshot이게 의문일 것이다. 우선 순서를 보자getSnapshotBeforeUpdate->componentDidUpdate 이렇게 된다
3번이 실행하고 4번이 실행한다 즉 snapshot이라는 변수에는 3번이 return해준데이터가 들어가 있다
5. static getDerivedStateFromProps(nextProps,prevState){
console.log('componentWillMount',"componentWillReceiveProps","getDerivedStateFromProps");
return null;
};
요기도 return이 중요하다 우선 이건 state값을 변경해줄수 있다. return에 {age:300}을 해주면 state값중 age 값을 300으로 변경시켜준다. 그런데 변경해 주거나 null을 넣어줘야된다. return을 안시키면 오류가 나온다
그리고 다른 함수와 달리 앞에 static을 넣어주어야 한다.
이제 라이프 사이클 끝이다
