ReactJS에서 조건부 렌더링 이해하기

React에서는 원하는 동작을 정교화할 수 있는 고유한 구성 요소를 만들 수 있습니다. 애플리케이션의 상태에 따라 일부만 렌더링할 수 있습니다.
조건부 렌더링은 JavaScript에서와 똑같이 작동합니다. 조건부 연산자를 사용하여 현재 상태를 나타내는 요소를 만들고 React가 UI를 업데이트하도록 합니다.

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

function GuestGreeting(props) {
     return <h1>Please sign up.</h1>
}

이 두 가지 구성 요소를 고려하십시오

조건에 따라 이들 중 하나를 표시하는 인사말 구성 요소를 만듭니다.

function Greeting(props) {
     const isLoggedIn props.isLoggedIn
     if (isLoggedIn) {
          return <UserGreeting />
     } else {
          return <GuestGreeting />
     }
}

const root = ReactDOM.createRoot(document.getElementById('root'))
// Try changing to isLoggedIn={true}
root.render(<Greeting isLoggedIn={false} />)

isLoggedIn={false}인 경우 출력은 Please sign up..입니다.
isLoggedIn={true}인 경우 출력은 Welcome Back!입니다.

변수를 사용하여 요소를 저장할 수 있습니다. 이렇게 하면 나머지 출력을 변경하지 않고 구성 요소의 일부를 조건부로 렌더링하는 데 도움이 될 수 있습니다. 로그아웃 및 로그인 버튼을 나타내는 이 두 구성 요소를 고려하십시오.

// Login Button
function LoginButton(props) {
     return (
          <button onClick={props.onClick}>
               Login
          </button>
     )
}

// Logout Button
function LogoutButton(props) {
     return (
          <button onClick={props.onClick}>
               Logout
          </button>
     )
}

일부 상태를 유지하는 구성 요소, 즉 상태 저장 구성 요소를 만들고 이름을 LoginControl로 지정해 보겠습니다. 이것은 현재 상태와 이전 예제에 따라 OR을 렌더링합니다.

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: true})
     }

     root.render(<LoginControl />)

     render() {
          const isLoggedIn = this.state.isLoggedIn
          let button
          if (isLoggedIn) {
               button = <LogoutButton onClick = {this.handleLogoutClick} />
          } else {
               button = <LoginButton onClick = {this.handleLoginClick} />
          }

          return (
               <div> 
                    <Greeting isLoggedIn = {isLoggedIn} />
                    {button}
               </div>
          )
     }
}

운동

위의 코드를 실행하고 결과가 무엇인지 확인하십시오.
저를 믿으세요, 당신은 그것을 좋아할 것입니다 💖