React 조건 렌더링 상세 정보

React에서 필요한 모든 행동을 봉인하기 위해 다른 구성 요소를 만들 수 있습니다.그리고 응용 상태의 변화에 따라 일부분만 렌더링할 수 있습니다.
React의 조건 렌더링은 JavaScript의 조건과 일치합니다. JavaScript 조작부호if 또는 조건 연산자를 사용하여 현재 상태를 나타내는 요소를 만들고 그에 따라 UI를 업데이트합니다.
먼저 두 구성 요소를 살펴보겠습니다.

function UserGreeting(props) {
 return <h1> !</h1>;
}

function GuestGreeting(props) {
 return <h1> 。</h1>;
}

로그인 여부에 따라 다음 중 하나를 표시하는 Greeting 구성 요소를 만듭니다.

function Greeting(props) {
 const isLoggedIn = props.isLoggedIn;
 if (isLoggedIn) {
 return <UserGreeting />;
 }
 return <GuestGreeting />;
}
 
ReactDOM.render(
 //   isLoggedIn={true}:
 <Greeting isLoggedIn={false} />,
 document.getElementById('example')
);

요소 변수
너는 변수를 사용하여 원소를 저장할 수 있다.이것은 조건부 렌더링 구성 요소의 일부분을 도와줄 수 있으며, 출력된 다른 부분은 변경되지 않습니다.
다음 예에서 LoginControl이라는 상태 있는 구성 요소를 만들 것입니다.
이것은 현재 상태에 따라 <LoginButton /> 또는 <LogoutButton /> 를 렌더링하고 앞의 예<Greeting />도 렌더링합니다.

class LoginControl extends React.Component {
 constructor(props) {
 super(props);
 this.handleLoginClick = this.handleLoginClick.bind(this);
 this.handleLogoutClick = this.handleLogoutClick.bind(this);
 this.state = {isLoggedIn: false};
 }
 
 handleLoginClick() {
 this.setState({isLoggedIn: true});
 }
 
 handleLogoutClick() {
 this.setState({isLoggedIn: false});
 }
 
 render() {
 const isLoggedIn = this.state.isLoggedIn;
 
 let button = null;
 if (isLoggedIn) {
  button = <LogoutButton onClick={this.handleLogoutClick} />;
 } else {
  button = <LoginButton onClick={this.handleLoginClick} />;
 }
 
 return (
  <div>
  <Greeting isLoggedIn={isLoggedIn} />
  {button}
  </div>
 );
 }
}
 
ReactDOM.render(
 <LoginControl />,
 document.getElementById('example')
);

연산자 & &
JSX에 어떤 표현식도 삽입할 수 있고, 자바스크립트의 논리와 & & 를 포함하여 코드를 괄호로 감싸면 요소를 쉽게 렌더링할 수 있습니다.

function Mailbox(props) {
 const unreadMessages = props.unreadMessages;
 return (
 <div>
  <h1>Hello!</h1>
  {unreadMessages.length > 0 &&
  <h2>
     {unreadMessages.length}  。
  </h2>
  }
 </div>
 );
}
 
const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
 <Mailbox unreadMessages={messages} />,
 document.getElementById('example')
);

JavaScript에서는 true && expression 은 항상 expression으로 돌아가고 false && expression 은 false로 돌아갑니다.
따라서, 조건이true라면, & & 오른쪽의 요소가 렌더링되고, false라면, React는 무시하고 건너뜁니다.
삼목 연산자
조건 렌더링의 또 다른 방법은 JavaScript의 조건 연산자를 사용하는 것입니다.

condition ? true : false。

아래의 예에서, 우리는 그것을 이용하여 조건부 텍스트를 조금 과장한다.
render() { const isLoggedIn = this.state.isLoggedIn; return (
The user is {isLoggedIn ? 'currently' : 'not'} logged in.
); }
직관적이지는 않지만 큰 표현식에서도 사용할 수 있습니다.

render() {
 const isLoggedIn = this.state.isLoggedIn;
 return (
 <div>
  {isLoggedIn ? (
  <LogoutButton onClick={this.handleLogoutClick} />
  ) : (
  <LoginButton onClick={this.handleLoginClick} />
  )}
 </div>
 );
}

어셈블리 렌더링 차단
극소수의 경우, 다른 구성 요소에 의해 과장되어도 구성 요소를 숨기기를 원할 수도 있습니다.렌더 방법을null로 되돌려줍니다. 렌더링 결과가 아닌 null로 되돌려줍니다.
다음 예에서 <WarningBanner /> 속성 warn의 값 조건에 따라 렌더링합니다.Warn 값이 false이면 구성 요소가 렌더링되지 않습니다.

function WarningBanner(props) {
 if (!props.warn) {
 return null;
 }
 
 return (
 <div className="warning">
   !
 </div>
 );
}
 
class Page extends React.Component {
 constructor(props) {
 super(props);
 this.state = {showWarning: true}
 this.handleToggleClick = this.handleToggleClick.bind(this);
 }
 
 handleToggleClick() {
 this.setState(prevState => ({
  showWarning: !prevState.showWarning
 }));
 }
 
 render() {
 return (
  <div>
  <WarningBanner warn={this.state.showWarning} />
  <button onClick={this.handleToggleClick}>
   {this.state.showWarning ? ' ' : ' '}
  </button>
  </div>
 );
 }
}
 
ReactDOM.render(
 <Page />,
 document.getElementById('example')
);

구성 요소의render 방법이null을 되돌려주는 것은 이 구성 요소의 생명주기 방법의 리셋에 영향을 주지 않습니다.예를 들어componentWill Update와componentDid Update는 여전히 호출될 수 있습니다.
이상은 React 조건 렌더링에 대한 상세한 내용입니다. React 조건 렌더링에 대한 더 많은 자료는 저희의 다른 관련 글을 주목해 주십시오!