[00]컴포넌트 실습 - 시간에 따라 출력문 변경

 

1. 영화 앱 만들기(p.135 ~ )

 

(1) 파일 생성 및 로딩

-App6.js

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

class App6 extends React.Component {
  render() {
    return;
  }
}

export default App6;

-index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
//import App from './App';
// import App2 from './App2';
// import App3 from './App3';
// import App4 from './App4';
// import App5 from './App5';
import App6 from './App6';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* <App /> */}
    {/* <App2 /> */}
    {/* <App3 /> */}
    {/* <App4 /> */}
    {/* <App5 /> */}
    <App6/>
  </React.StrictMode>,
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

(2) 로딩 현상 구현 : App6.js

-5초후 문자열 변경

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

class App6 extends React.Component {
  state = {
    isLoading: true,
    movies: [],
  };

  render() {
    //state 객체의 isLoading 요소를 객체 분할 할당방식을 사용하여 isLoading 변수를 선언하고 데이터 할당
    const { isLoading } = this.state;

    //변수 isLoading의 데이터 값에 따라서 화면에 출력하는 문구 변경. 삼한연산자.
    return <div>{isLoading ? 'Loading...' : 'We are ready'}</div>;
  }

  //render() 함수가 실행된 후 componentDidMount() 실행
  componentDidMount() {
    //1회용 타이머인 setTimeout() 사용해 5초 후 로딩이 끝나는 프로그램 실행
    //5초 후 state 객체의 요소인 isLoading의 값을 false로 변경
    setTimeout(() => {
      this.setState({ isLoading: false });
    }, 5000);
  }
}

export default App6;

---

< 실습 >

(문제 2) state 객체에 변수를 추가하여 해당 변수의 값을 매 1초마다 확인하고, 해당 변수의 값이 0이 될 때 화면에 출력하는 글자를 We Are Ready!!로 변경하는 프로그램 작성 -로딩 중일 때는 Loading...x로 화면에 글자를 출력 (x는 숫자)

 

(2-1) 풀이 2 : ComponentDidMount()와 ComponentDidUpdate() 함수 사용

-componentDidMount()가 실행되면 setTimeout()을 사용하여 1초 후에 state.sec의 값을 1 감소시킴.

-state의 값이 변경되었기 때문에 Updating 상태로 변경되어 리액트가 화면을 다시 구성

-화면 업데이트 완료되면 componentDidUpdate() 함수가 실행

-componentDidUpdate() 함수에서 setTimeout()을 사용하여 1초 후에 if(state.sec >0) 확인하여

 조건이 참이면 state.sec -1 실행 / 조건이 거짓이면 state.isLoading의 값을 false로 변경

-조건이 참이든 거짓이든 state의 상태가 변경되었기 때문에 updating 상태가 되어 리액트가 화면 다시 구성

-state.sec의 값이 0이 될 때까지 Updating 상태가 되어 화면을 계속 재구성

 

→ 최초의 DidMount 실행 후, 계속 DidUpdate()문 반복. sec가 >0일 때까지.

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

class App6 extends React.Component {
  state = {
    sec: 5,
    isLoading: true,
    movies: [],
  };

  render() {
    //state 객체의 isLoading 요소를 객체 분할 할당방식을 사용하여 isLoading 변수를 선언하고 데이터 할당
    const { isLoading, sec } = this.state;

    //변수 isLoading의 데이터 값에 따라서 화면에 출력하는 문구 변경. 삼한연산자.
    return <div>{isLoading ? `Loading... ${sec}` : 'We are ready'}</div>;
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({ sec: this.state.sec - 1 });
    }, 1000);
  }
  
  componentDidUpdate() {
    setTimeout(() => {
      if (this.state.sec > 0) {
        this.setState({ sec: this.state.sec - 1 });
        //sec 값이 변경되면 updating
      } else {
        this.setState({ isLoading: false });
      }
    }, 1000);
  }
}

export default App6;

 

(2-2) 풀이 2 : ComponentDidMount()와 SetInterval()사용

-ComponentDidMount()에서 SetInterval() 함수를 사용하여 매 1초마다 if(state.sec >0)을 확인

-조건이 참이면 state.count -1 실행(state.sec가 0이 될때까지)

 조건이 거짓이면 state.isLoading의 값을 false로 변경

-state.sec의 값이 0이 되면 setInterval을 정지시킴

 

 

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

class App6 extends React.Component {
  state = {
    sec: 5,
    isLoading: true,
    movies: [],
  };

  //   secTime = () => {
  //     this.setState((sec) => ({
  //       sec: this.state.sec - 1,
  //     }));
  //   };

  render() {
    //state 객체의 isLoading 요소를 객체 분할 할당방식을 사용하여 isLoading 변수를 선언하고 데이터 할당
    const { isLoading, sec } = this.state;

    //변수 isLoading의 데이터 값에 따라서 화면에 출력하는 문구 변경. 삼한연산자.
    return <div>{isLoading ? `Loading... ${sec}` : 'We are ready'}</div>;
  }

  //render() 함수가 실행된 후 componentDidMount() 실행
  componentDidMount() {
    //1회용 타이머인 setTimeout() 사용해 5초 후 로딩이 끝나는 프로그램 실행
    //5초 후 state 객체의 요소인 isLoading의 값을 false로 변경
    setTimeout(() => {
      //if문 사용하여 값 확인하여 출력문 다르게 설정
      //   this.setState({ isLoading: false });
      this.setState({ sec: this.state.sec - 1 });
    }, 1000);
  }
  componentDidUpdate() {
    setTimeout(() => {
      if (this.state.sec > 0) {
        this.setState({ sec: this.state.sec - 1 });
        //sec 값이 변경되면 updating
      } else {
        this.setState({ isLoading: false });
      }
    }, 1000);
  }
}

export default App6;