리액트 React | 노마스 코더 영화 평점 웹서비스 | 로딩 현상 구현

 

✅ Movie 컴포넌트 구성하기

💡 App 컴포넌트 작성

import React from 'react';

// App 컴포넌트 정의
class App extends React.Component {
  // render 메소드 정의
  render() {
    return (
      <div>
        {/* 컴포넌트 내용을 추가 */}
      </div>
    );
  }
}

// App 컴포넌트를 다른 파일에서 사용할 수 있도록 내보냄
export default App;

 

💡 isLoding state

• React 애플리케이션에서 데이터를 불러오거나 처리한다. 
• 로딩 중일 때 사용자에게 로딩 중임을 알리기 위해 UI를 업데이트하는 데 사용한다.
• isLoading 변수는 true 또는 false 값으로 설정한다.

---

import React from 'react';

// App 컴포넌트 정의
class App extends React.Component {
  // 초기 상태 설정
  state = {
    isLoding: true,
  };

  // render 메소드 정의
  render() {
    // 상태를 비구조화 할당하여 isLoding 값을 가져옴
    const { isLoding } = this.state;

    return (
      <div>
        {/* isLoding 값에 따라 메시지를 표시함 */}
        {isLoding ? 'Loading...' : 'We are ready'}
      </div>
    );
  }
}

// App 컴포넌트를 다른 파일에서 사용할 수 있도록 내보냄
export default App;

 

💡 로딩 현상 구현

• setTimeout() 함수는 componentDidMount() 함수 내부에서 사용한다. 
• setTimeout() 함수는 첫 번째 인자로 전달한 함수를 두 번째 인자로 전달한 값 후에 실행한다.
• componentDidMount() 함수는 컴포넌트가 최초로 렌더링 된 후에 호출되는 생명주기 함수이다.

---

import React from 'react';

// App 컴포넌트 정의
class App extends React.Component {
  // 초기 상태 설정
  state = {
    isLoding: true,
  };

  // 컴포넌트가 마운트 된 후 실행되는 함수
  componentDidMount() {
    // 6초 후에 isLoading 값을 false로 변경
    setTimeout(() => {
      this.setState({ isLoading: false });
    }, 6000);
  }

  // render 메소드 정의
  render() {
    // 상태를 비구조화 할당하여 isLoding 값을 가져옴
    const { isLoding } = this.state;

    return (
      <div>
        {/* isLoding 값에 따라 메시지를 표시함 */}
        {isLoding ? 'Loading...' : 'We are ready'}
      </div>
    );
  }
}

// App 컴포넌트를 다른 파일에서 사용할 수 있도록 내보냄
export default App;