React의 조건부 렌더링

반응에서 표시하거나 렌더링할 UI 요소를 결정하는 것을 조건부 렌더링이라고 합니다. 이것은 3항 연산자를 사용하는 도우미 함수와 마지막으로 렌더링 메서드에서 간단한 if-else 조건을 사용하는 3가지 방법으로 달성할 수 있습니다. 이러한 기술을 더 잘 이해하기 위해 몇 가지 코드 예제를 살펴보겠습니다.

도우미 함수를 사용한 조건부 렌더링
아이디어는 렌더링 메서드에서 논리를 추상화하고 일부 조건에 따라 일부 JSX 또는 UI를 반환하는 함수 내부에 추가하는 것입니다.
다음은 예입니다.

class App extends React.Component{
  helperFunction = () => {
      return (
          <h2>
              I was returned from a helper function
          </h2>
      )
  }
  render() {
      return (
          <div>
              {this.helperFunction()}
          </div>
      )
  }
}
export default App;

class App extends React.Component {
  render() {

    const helper = () => {
      return <h2>I was returned from a helper function</h2>;
    };

    return <div>{helper()}</div>;
  }  
}
export default App;

삼항 연산자 사용
이것은 UI 가격을 표시하거나 className 추가 또는 요소 내부 값 표시와 같은 값을 조작하기 위해 반응 세계에서 조건부 렌더링을 처리하는 가장 일반적인 방법이며 일반적으로 구성 요소의 반환 메서드 내부에 작성됩니다.
이 접근 방식을 더 잘 이해하기 위해 예를 살펴보겠습니다.

class App extends React.Component {

  state = {
    data:true
  }

  render() {

    return (
      <div>
        {
          this.state.data ? <p>Data is available</p> : <p>Sorry no data can be shown</p>
        }
      </div>
    )
  }
}

export default App;

If/Else 조건의 사용
이것은 사용자에게 반환할 UI 또는 JSX를 결정하는 매우 직접적인 접근 방식입니다. 아래 예를 참조하십시오
이 접근 방식을 더 잘 이해하십시오.

class App extends React.Component {  
  state = {
    data:true
  }
  render() {
    if (this.state.data) { 
      return (<p>Data is available</p>)
    }
    else {
      return (<p>Sorry not data is available</p>)
    }    
  }
}
export default App;

이 기사가 마음에 들면 여기 내 블로그를 방문하십시오 www.uiuxtek.in