lifecycle
01_lifecycle-method-for-mount
컴포넌트의 라이프 사이클
생명주기 도표 : https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
라이프 사이클은 총 3가지 카테고리
마운트 : DOM이 생성 되고 웹 브라우저상에 나타나는 것
업데이트 : 컴포넌트의 상태가 바뀌는 경우를 의미, 총 4가지의 업데이트 상황이 있다.
- props의 변경
- state의 변경
- 부모 컴포넌트 리랜더링
t- his.forceUpdate로 강제 랜더링 트리거
언마운트: 컴포넌트를 DOM에서 제거하는 것을 언마운트(UnMount)라고 한다.
mount 카테고리 생명주기 확인
마운트 : DOM이 생성 되고 웹 브라우저상에 나타나는 것
생명주기 메소드는 클래스형 컴포넌트에서만 사용 가능
(함수형 컴포넌트는 Hooks의 기능을 활용)
- 컴포넌트를 새로 만들 때마다 호출 되는 클래스 생성자 메소드
constructor(props){
super(props);
console.log('constructor');
this.state = { text : '' };
}2. props에 있는 값을 state에 넣을 때 사용하는 메소드
getDerivedStateFromProps :
- props로 받아온 값을 state에 동기화 시키는 용도로 사용, 마운트와 업데이트 시 호출
- state를 변경할 필요가 없다면 null을 반환
(리액트 16.3 이후에 새로 만든 라이프 사이클 메소드)
static getDerivedStateFromProps(nextProps, prevState) {
console.log('getDerivedStateFromProps');
console.log(nextProps);
console.log(prevState);
// props로 전달 된 text의 값이 state의 값과 같지 않다면 => 조건에 따라 특정 값만 동기화
if(nextProps.text !== prevState.text) {
// 변경할 state 값을 반환
return { text : nextProps.text }
}
return null; //state를 변경할 필요가 없다면 null을 반환
}3. 리액트 엘리먼트를 랜더 트리 형태로 구성하는 시점에 호출되는 메소드
render :
- 랜더링 될 컴포넌트의 형태를 리액트 컴포넌트로 반환
- 라이프 사이클 메소드 중 유일한 필수 메소드
- render 메소드는 this.props와 this.state에 접근 가능
- 아무런 컴포넌트도 보여주고 싶지 않다면 null 또는 falsy 값을 반환하도록 한다.
주의사항
- 이 메소드 내에서는 이벤트 설정이 아닌 곳에서 setState를 사용하면 안된다.
- 브라우저의 DOM에 접근해서도 안된다.
- DOM 정보를 가지고 오거나 state에 변화를 줄 때는 componentDidMount에서 처리해야 한다.
render() {
console.log('render');
return <h1>hello world, { this.state.text }</h1>;
}- 컴포넌트가 웹 브라우저상 나타난 후 호출되는 메소드
componentDidMount :
- 컴포넌트를 다 만든 후에 첫 랜더링을 마치고 나면 호출되는 메소드
- 다른 자바스크립트 라이브러리 또는 프레임워크의 함수를 호출,
- 이벤트 등록, setTimeout, setInterval, 네트워크 요청과 같은 비동기 작업을 처리하면 된다.
componentDidMount() {
console.log('componentDidMount');
}02_ lifecycle-for-update
state가 변경되는 상황을 만들고 업데이트 라이프 사이클 메소드를 확인해보는 테스트
업데이트 : 컴포넌트의 상태가 바뀌는 경우를 의미, 총 4가지의 업데이트 상황이 있다.
- props의 변경
- state의 변경
- 부모 컴포넌트 리랜더링
t- his.forceUpdate로 강제 랜더링 트리거
- props에 있는 값을 state에 넣을 때 사용하는 메소드
getDerivedStateFromProps :
- props로 받아온 값을 state에 동기화 시키는 용도로 사용, 마운트와 업데이트 시 호출
- state를 변경할 필요가 없다면 null을 반환
(리액트 16.3 이후에 새로 만든 라이프 사이클 메소드)
static getDerivedStateFromProps(nextProps, prevState) {
console.log('getDerivedStateFromProps');
console.log(nextProps);
console.log(prevState);
return null;
}- 컴포넌트가 리랜더링을 할 것인지 말것인지 결정하는 메소드
shouldComponentUpdate :
자주 사용되지 않는 생명주기 메소드.
주로 성능 최적화를 목적, 상황에 따라 리랜더링을 방지하기 위해 사용
반드시 boolean을 반환해야하며 false를 반환할 시 업데이트 과정을 여기에서 중단된다.
해당 메소드를 정의하지 않거나 리턴 타입을 생성하지 않으면 언제나 true 값을 반환한다.
shouldComponentUpdate(nextProps, nextState) {
console.log('shouldComponentUpdate');
console.log(nextProps);
console.log(nextState);
return true;
}render: 컴포넌트를 랜더링하는 메소드
render(){
console.log('render');
return (
<>
<button
onClick={ () => this.setState({ now : new Date().toLocaleTimeString() }) }
>
현재 시간 확인하기
</button>
<h1>{ this.state.now }</h1>
</>
)
}- 컴포넌트의 변화를 실제 DOM에 반영하기 직전에 호출되는 메소드
getSnapshotBeforeUpdate :
- render에서 만들어진 결과물이 브라우저에 실제 반영되기 직전에 호출
- 해당 메소드의 반환값을 componentDidUpdate에서 전달받을 수 있다.
- 주로 업데이트하기 직전의 값을 참고할 일이 있을 때 활용
(예: 스크롤바 위치 유지)
(리액트 16.3이후 만들어진 메소드)
getSnapshotBeforeUpdate(prevProps, prevState){
console.log('getSnapshotBeforeUpdate');
/* componentDidUpdate의 snapshot으로 전달되는 확인용 */
return {
message : '스냅샷입니다.'
}
}- 컴포넌트 업데이트 작업이 끝난 후 호출하는 메소드
ComponentDidUpdate :
- 리랜더링을 완료한 후 실행
- 업데이트가 끝난 직후이므로 DOM관련 처리를 해도되며,
이전과 현재 props를 비교하여 네트워크 요청을 보내는 작업 등도 가능
ComponentDidUpdate(prevProps, prevState, snapshot){
console.log('ComponentDidUpdate');
console.log(snapshot);
}03_lifecycle-method-for-unmount
언마운트 카테고리의 생명주기 메소드 확인하기
언마운트 : 컴포넌트를 DOM에서 제거하는 것을 언마운트(UnMount)라고 한다.
ComponentWillUnmount :
1. 컴포넌트가 웹 브라우저 상에서 사라지기 직전에 호출되는 메소드
등록한 이벤트, 타이머, 직접 생성한 DOM이 있다면 여기에서 제거 작업을 주로 수행한다.
class Greeting extends React.Component {
render() {
console.log('render');
return <h1>hello, world!</h1>;
}
ComponentWillUnmount(){
console.log('ComponentWillUnmount');
}
}
// 랜더링 구문 분리
const ReactClientDOM = ReactDOM.createRoot(document.getElementById('root'));
ReactClientDOM.render(<Greeting/>);
/* 5초 뒤 아무런 컴포넌트로 랜더링하지 않는 것으로 변경하여 확인 */
setTimeout(() => {ReactClientDOM.render(null)}, 5000);