React 조건부 렌더링(falsy에서 유의하자)

조건부 렌더링

조건부 렌더링은 상태에 따라서 원하는 컴포넌트만 렌더링 하는 것을 말한다. 일반적으로 if 문이나 && 논리연산자, 3항 연산자로 표현한다. 혹은 return 구분 자체를 구분해서 정의하기도 한다.

// return 으로 구분한 경우
function User({login}){
  if(login){
    return <h1>로그인 후 화면</h1>
  }else{
    return <h1>로그인이 필요합니다</h1>
  }
}

// 3항 연산자 or && 연산자 사용

function User({login}){
    return (<div>
        {login ? <h1>로그인 후 화면</h1> :<h1>로그인이 필요합니다</h1>}
    </div>)
}


export default function App(){
    return (
        <div>
            <User login={true}/>
        </div>
    )
}

❗ 주의해야할 점으로는 && 연산자를 사용할 때 앞의 조건이 falsy 한 값이면, 무시하지않고, falsy 표현식이 반환된다는 점을 유의 해야한다.

// 여기서 0은 false 가 아니라 falsy 한 값이기 때문에, 'null'이 반환되는 것이 아니라, 0을 반환해서 화면에는 0이 출력되버린다.
function User({login}){
    return (<div>
      {login && <h1>로그인 후 화면</h1>} 
    </div>)
}


export default function App(){
  return (
    <div>
      <User login={0}/>
    </div>
  )
}

// 수정하려면 !! 누개를 앞에 붙여준다. 원리는 !는 boolean의 반대 값을 나타낸다. 떄문에 !0 -> true 로 바뀌고 !true -> false 로 바뀌면서 , falsy 혹은 truthy 한 값을 boolean 값으로 바꿀 수 있는 효과가 있다
function User({login}){
    return (<div>
        {!!login && <h1>로그인 후 화면</h1>}
    </div>)
}

null 사용해서 렌더링 막기

의도적으로 null을 반환하여 컴포넌트의 렌더링을 막을 수 있습니다. 위에서 if 연산자를 사용해서 jsx를 반환하는 것이 아니라 null 을 반환하면 됩니다.