React에서 조건부 렌더링을 구현하는 방법

다음은 React에서 조건부 렌더링을 구현하는 몇 가지 방법입니다.

1. 메서드 내에서 if-else 문 사용 render:

render() {
  if (this.state.isLoading) {
    return <div>Loading...</div>;
  } else {
    return <div>Hello, World!</div>;
  }
}

render() {
  return this.state.isLoading ? <div>Loading...</div> : <div>Hello, World!</div>;
}

render() {
  return this.state.isLoading && <div>Loading...</div>;
}

renderContent() {
  if (this.state.isLoading) {
    return <div>Loading...</div>;
  }
  return <div>Hello, World!</div>;
}

render() {
  return <div>{this.renderContent()}</div>;
}
//
getContent() {
  if (this.state.isLoading) {
    return <div>Loading...</div>;
  }
  return <div>Hello, World!</div>;
}

render() {
  const content = this.getContent();
  return <div>{content}</div>;
}