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