조건부 렌더링 패턴 Conditional Rendering Pattern
리액트의 조건부 렌더링 문서에서 조건에 따라 랜더링할 컴포넌트를 선택하는 방법을 소개하고 있지만 추가적으로 알아두면 유용한 best practices 패턴이 몇 가지 더 있어서, 하나씩 소개드리도록 하겠습니다.

if else 패턴

리액트 공식 문서에서 소개하는 가장 기본적인 패턴입니다.

function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return ;
}
else {
return ;
}
}
if 문 조건에 따라 UserGreeting 컴포넌트를 렌더링할지 GuestGreeting 컴포넌트를 렌더링할지 결정합니다.

if else 패턴은 컴포넌트가 조건에 따라 렌더링할 내용 전체가 결정되는게 특징인 패턴입니다. 이 패턴은 컴포넌트의 일부분만 선택적으로 렌더링하기 적합하지 않습니다.

예를 들어, 아래와 같이 if else 패턴을 작성하면 동작하지 않습니다.

function Greeting(props) {
const isLoggedIn = props.isLoggedIn;

return (
    <React.Fragment>
    {
        // 'Unexpected token' error 발생
        if (isLoggedIn) {
            return <UserGreeting />;
        }
        else {
            return <GeustGreeting />;
        }
    }
    </React.Fragment>
);

}
if else 패턴을 사용하면서 일부분만 렌더링하려면 즉시 실행 함수 (IIFE) 를 사용해야 가능합니다.

function Greeting(props) {
const isLoggedIn = props.isLoggedIn;

return (
    <React.Fragment>
    {
        // 즉시 실행 함수 IIFE
        (() => {
                if (isLoggedIn) {
                    return <UserGreeting />;
                }
                else {
                    return <GeustGreeting />;
                }
            }
        )();
    }
    </React.Fragment>
);

}
즉시 실행 함수를 사용한 if else 패턴은 가독성이 떨어지는 문제가 심각해, 사용을 권장하지 않습니다. 그리고 if else 패턴으로 렌더링 대상 전체가 변경된다면, 새로운 컴포넌트를 작성하는게 더 적합하기 때문에 if else 패턴은 효과적으로 활용하기 어려운 패턴입니다.

: ? 패턴

if else 패턴과 마찬가지로 리액트 공식 문서에서 인라인 If-Else 라고 소개하는 패턴입니다.

function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
return (
<React.Fragment>
// 삼항 연산자 ' (조건) ? (참일 경우) : (거짓일 경우) ' 로 부분 조건부 렌더링 구현
{ isLoggedIn ? ( ) : ( ) }
</React.Fragment>
);
}
: ? 패턴은 if else 패턴의 치명적인 단점인 부분 렌더링이 가능하도록 개선한 패턴입니다. : ? 패턴은 JavaScript 문법으로 간결하게 사용이 가능한게 장점인 패턴입니다. 하지만 : ? 패턴 또한 단점이 있는데 컴포넌트를 렌더링할지 말지 결정할 때 불필요하게 null 을 반환하는 코드를 작성해야 합니다.

function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
return (
<React.Fragment>
// 로그인했을 경우만 '' 를 렌더링
{ isLoggedIn ? ( ) : null }
</React.Fragment>
);
}
null 을 반환한다고 해서 심각한 성능 저하가 발생하지는 않기 때문에 그대로 사용해도 되지만, && 패턴으로 개선이 가능합니다.

&& 패턴

&& 패턴은 : ? 패턴과 함께 자주 사용되는 조건부 렌더링 패턴입니다. (선행 조건) && (후행 조건) 논리 연산자는 선행 조건이 참이어야만 후행 조건을 평가하고 후행 조건을 평가한 결과를 반환하는 특징이 있습니다.

(true && 'Hello');
// 결과 = 'Hello'
&& 패턴은 이러한 특징을 적극적으로 활용한 패턴입니다.

function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
return (
<React.Fragment>
{ isLoggedIn && ( ) }
</React.Fragment>
);
}
: ? 패턴이 null 을 반환하게 되는 경우를 보완하기 때문에, : ? 패턴과 && 패턴을 같이 사용하면 조건부 렌더링을 효과적으로 구현할 수 있습니다.