component 생명주기

안녕하세요. 건브로입니다. 오늘은 크리스마스입니다.🎄

 

1년 전만 해도 사람들은 커플들, 친구들, 가족들 이렇게 밖에서 좋은 시간들 보냈었죠.

현재 다시 크리스마스가 왔는데, 다들 안에서 보내야 한다는 게 아쉬워요...😥

화이트 크리스마스였으면, 안에서 보내기 더 좋았을텐데 눈이 안 왔네요.❄

 

그래도 아쉬운 대로 저는 오늘은 그냥 친구들과 'League of legend'하면서 온라인에서 친구들과 보낼 겁니다!

다들 즐거운 실내 크리스마스 보내세요~

---

1. 컴포넌트의 생명주기

컴포넌트에는 생명주기가 있어요. 웹을 더 효과적으로 사용하려면 생명주기는 필수라고 생각해요.

 

예를 들어서 제가 해당 웹페이지에 새로 만들었을 때,

어떤 창이 뜨게 하려면 컴포넌트의 생명 주기의 마운트가 필요합니다.

 

그리고 제가 페이스북이나 유튜브 같은 곳에 좋아요 누르면 업데이트가 되는데, 

그때 컴포넌트의 생명주기의 업데이트라고 생각하면 돼요.

 

컴포넌트를 제거해야 할 때가 있는데, 그때는 생명주기의 마운트 해제를 사용해야 합니다.

아래의 코드들을 살펴보시죠!

 

//App.js
import React from 'react';

class App extends React.Component{
  constructor(props){
    super(props)
    console.log('이 부분은 constructor입니다.');
  }
  componentDidMount(){
    console.log('컴포넌트 마운트가 됐습니다.');
  }
  state={
    name: ''
  };
  rename = () =>{
    this.setState({
      name: document.getElementById('text').value
    });
  }
  componentDidUpdate(){
    console.log('컴포넌트 업데이트 됐어용');
  }
  componentWillUnmount(){
    alert('새로고침 할 것입니까?');
  }
  render(){
    console.log('렌더링 중입니다.');
    return(
      <div>
        <input type="text" id="text" placeholder="이름을 입력하세요."/>
        <button onClick={this.rename}>제출하기</button>
        <div>{this.state.name}</div>
      </div>
    )
  }
}

export default App;

 

 

 

페이지 처음 화면

 

 

위의 이미지를 보시면 아시겠지만, mount의 순서는

 

1️⃣ constructor()함수가 먼저 실행됩니다.

2️⃣ render()함수가 두 번째로 실행됩니다.

3️⃣ componentDidMount()함수가 마지막으로 실행됩니다.

 

그러면 이름을 입력하고 제출해서 업데이트를 해보겠습니다.

 

 

이름을 입력하고 제출 했을 때 화면

 

 

위의 이미지는 업데이트됐을 때 화면입니다. update 순서는

1️⃣ setState() 함수를 실행한다.

2️⃣ render() 함수가 실행된다.

3️⃣ componentDidUpdate() 함수가 마지막으로 실행됩니다.

 

마지막으로 componentWillUnmount() 함수는 나타내기가 힘들지만

제가 코드를 바꿀 때 react에서 반응합니다. 컴포넌트를 제거할 때 사용한다고 생각하시면 됩니다.

 

 

코드를 수정했을 때 react 페이지 화면(컴포넌트를 제거할 때)

 

 

이렇게 컴포넌트에는 생명 주기가 있어요. 이러한 생명주기를 이용한 예시가 있는데요.

대부분 사람들은 페이지를 열면서 Loading... 화면을 본 적 있을 것입니다.

보여드리겠습니다.

 

 

//App.js
import React from 'react';

class App extends React.Component{
  constructor(props){
    super(props);
  }
  componentDidMount(){
    return (
      setTimeout(()=>{
        this.setState({
          isLoading: false
        });
    },4000)
    );
  }
  state={
    name: '',
    isLoading:true
  };
  rename = () =>{
    this.setState({
      name: document.getElementById('text').value
    });
  }
  render(){
    const {isLoading} = this.state;
    return <div>{isLoading ? "loading": <div>
    <input type="text" id="text" placeholder="이름을 입력하세요."/>
    <button onClick={this.rename}>제출하기</button>
    <div>{this.state.name}</div>
  </div>}</div>
  }
}

export default App;

 

 

위에 있는 이름을 입력하는 코드에서 변형한 코드입니다.

 

setTimeout() 함수를 이용해서 6초 동안에는 'loading'이 화면서 뜨고, 

그 후에는 이름을 입력하는 코드가 나옵니다.

 

이 원리는 state 객체의 isLoading을 잠시 동안 바꿔서 보이게 하는 원리예요.

동영상을 보시면 이해가 될 거예요!

 

 

Loading 동영상

 

 

이 영상의 핵심은 isLoading의 boolean값입니다. 영상의 개발자 도구에 집중해주세요! 

효과적으로 이해 갈 것입니다.

---

오늘은 여기서 마치도록 하겠습니다.

저도 그렇고 다들 react를 공부하면서 성장해봅시다!!