[공식문서] 조건부 렌더링

1. 조건부 렌더링 이란?

React에서의 조건부렌더링은 자바스크립트에서의 조건 처리와 같이 동작한다. 

if 나 조건부연산자에 따라 현재 상태를 나타내는 엘리먼트를 만들면 React가 현재상태에 맞게 UI를 업데이트 할것이다.

 

* 예제 ( 사용자의 로그인 상태에 맞게 컴포넌트 중 하나를 보여주는 greeting 컴포넌트로 이해해보자.)

function Greeting(props) {

    const isLoggedIn = props.isLoggedIn;

    if (isLoggedIn) {

          return <UserGreeting />;

     }

           return <GuestGreeting />;

     }

 

     ReactDOM.render(

      // Try changing to isLoggedIn={true}:

     <Greeting isLoggedIn={false} />,

      document.getElementById('root')

);

 

isLoggedIn props에 따라 다른 인사말이 렌더링 되는걸 볼 수 있다.

 

* 조건부 렌더링 예시들

 

1. if를 사용한 조건부렌더링 

import React from 'react'

export default class Message extends React.Component {

       render () {

           if(this.props.age >= 14) {

                return <p>{`다음 단계로 진행해주세요`}</p>

           }else {

                return <p>{`14세 미만은 부모님 동의가 필요합니다.`}</p>

            }

         }

}

 

2. 삼항연산자를 사용한 조건부렌더링

import React from 'react'

export default class Message extends React.Component {

    render () {

       const {age} = this.props;

       return age >= 14? (<p>{`다음 단계로 진행해주세요`}</p>) : (<p>{`14세 미만은 부모님 동의가 필요합니다.`}</p>)

      }

}

 

3. &&연산자를 사용한 조건부렌더링

import React from 'react'

export default class Message extends React.Component {

     state = {

       overFourteenYearsOld : this.props.age >= 14

      }

      render () {

          const {overFourteenYearsOld} = this.state;

           return (

             <React.Fragment>

                  {overFourteenYearsOld && <p>다음 단계로 진행해주세요.</p>}

                  {!overFourteenYearsOld && <p> 14세 미만은 부모님 동의가 필요합니다. </p>}

              </React.Fragment>

         )

      }  

 }

 

&&연산자는 보기에도 두 그룹으로 나눠져있어서 한눈에 들어오고 가독성도 좋지만

0일 경우에는 거짓으로 판단해 의도한대로 렌더링 되지 않을 수 있다.