React에서 JSX를 조건부로 렌더링하는 4가지 방법

JSX를 조건부로 렌더링하는 것은 React에서 매우 일반적이고 필수적인 작업입니다. React에서 JSX를 조건부로 렌더링할 수 있는 4가지 방법이 있습니다.

삼항 연산자

논리 연산자

if, else, else if

스위치 문

일반적으로 개발자는 조건부 렌더링을 위해 JSX 내부에서 if else 또는 switch statement를 사용하지 않습니다. if else 또는 switch statement 가 ternary operator 또는 logical operator 보다 더 많은 코드 줄을 사용하기 때문입니다. 그러나 처리할 조건이 두 개 이상인 경우에는 if else 또는 switch statement 를 사용해야 합니다.

삼항 연산자

function TernaryOperator() {

  return (
    <>     
        {
            /* Ternary Operator */

            'a'==='a' ? <p>Hi</p> : <p>Bye</p>
        } 
    </>
  )

}

export default TernaryOperator

Explanation

Only if the condition 'a'==='a' is true, <p>Hi</p> will be rendered one the screen. Otherwise, <p>Bye</p> will be rendered on the screen.

Note:

It's not a very realistic example because you would never compare 'a'==='a' in a real-world application. But this comparison is not the main point here. The point is the use of the ternary operator.

논리 연산자

AND&&(논리 연산자)

function LogicalAnd() {

  return (
    <>     
        {
            /* Logical 'AND' Operator*/

            'a'==='a' && <p>Hi</p>
        } 
    </>
)

}

export default LogicalAnd
)

Explanation

Only if the condition 'a'==='a' is true, <p>Hi</p> will be rendered on the screen.

OR||(논리 연산자)

function LogicalOR({name, labelText}) {

  return (
    <>       
        /* Logical 'OR' Operator*/
         {labelText || name}      
    </>
  )
}

export default LogicalOR

Explanation:

If labelText and name both props are passed into this component, then labelText will be rendered on the screen. But if only one of them (name or labelText ) is passed as a prop, then that passed prop will be rendered on the screen.

NOT!(논리 연산자)

function LogicalNOT ({name})  { 

    /* Logical NOT Operator */
    if (!name) {  
      return null; 
    }              


    return <p>Hi! My name is {name}.</p>;
  }

 export default LogicalNOT

Explanation

Only if the name prop is passed then <p>Hi! My name is {name}.</p> will be rendered on the screen, otherwise, nothing will render on the screen.

Note

if (!name) { return null }, returning early like this is known as Early Return. Early Return is also called Guard Clause or Bouncer Pattern.

만약, 그렇지 않다면, 그렇지 않다면

function IfElse() {

    return ( 
      <>     
          {
            /*If else condition within an anonymous function*/

              (() => {
                  if('a'==='b') {
                          return (
                              <p>Hi</p>
                          )
                      } else if ('b'==='b') {
                          return (
                          <p>Hello</p>
                          )
                      } else {
                          return (
                              <p>Bye</p>
                          )
                      }
              })()  
          }  
      </>  
    )


}

export default IfElse

Note:

Have to use an anonymous function (also need to immediately invoke the function )

Switch 문

function SwitchStatement() {

  return ( 
    <>     
        {

           /*Switch Statement within an anonymous function*/

            (() => {
                switch(true) {

                    case('a'==='b'): {
                            return (
                                <p>Hello</p>
                            )
                        }
                    break;

                    case('a'==='a'): {
                        return (
                            <p>Hi</p>
                        )
                    }
                    break;

                    default: {
                            return (
                                <p>Bye</p>
                            )
                        }
                    break;
                    }
            })()  
        }  
    </>  
)

}

export default SwitchStatement

Note:

Have to use an anonymous function (also need to immediately invoke the function )

그게 다야.😃 읽어줘서 고마워.🎉