[React]컴포넌트의 렌더링을 지연하는 방법

React에서 컴포넌트의 렌더링을 지연하는 방법입니다.

Class기반의 컴포넌트로 예제 코드를 작성하였습니다.

컴포넌트의 렌더링을 지연하는 방법이 경우에 따라서 처리되는 방법이 다르기 때문에 제 코드가 100% 정답은 아니라는 점 참고부탁드립니다.

---

Class기반의 컴포넌트

새로고침을 클릭하시면, 3초 후 화면이 어떻게 바뀌는지 확인할 수 있습니다.

 

부모 컴포넌트에서 시간을 넘겨서 특정 시간이 지난 후 다시 렌더링되는 코드입니다.

 

App.js

Delay 컴포넌트에 3000이라는 값을 props로 전달합니다.

즉, Delay 컴포넌트는 3초 후 화면에 렌더링됩니다.

class App extends Component {
  render() {
    return (
      <div className="App">
        <Delay wait={3000} />
      </div>
    );
  }
}

 

Delay.js

Delay 컴포넌트는 this.state.hidden 값에 따라서 조건부 렌더링 처리하였습니다.

class Delay extends Component {
  constructor(props) {
    super(props);
    // this.state.hidden의 초기값을 true로 설정합니다.
    this.state = {
      hidden: true
    };
  }

  componentDidMount() {
    // 3초 후 this.state.hidden의 값을 false로 변경합니다.
    setTimeout(() => {
      this.setState({ hidden: false });
    }, this.props.wait);
  }

  render() {
    return (
      <React.Fragment>
        {/* 
        this.state.hidden은 초기값이 true이므로 null을 반환합니다.
        3초 후 false으로 변경이되어 && 연산자 우측의 값을 반환합니다.
        */}
        {this.state.hidden === false && <h1>Delay 컴포넌트</h1>}
      </React.Fragment>
    );
  }
}

 

Delay 컴포넌트의 실행 순서입니다.

실행 순서
1. constructor 
→ this.state.hidden의 초기값을 설정
2. render(최초 렌더링)
→ this.state.hidden이 true이므로 null을 반환
3. componentDidMount(마운트)
→ setTimeout 함수를 사용하여 일정 시간 후 this.state.hidden의 값을 false로 설정
4. render
→ this.state.hidden의 값을 false로 변경되어 && 연산자의 우측의 값을 반환