시작

velog를 돌아다니다 재미있는 글을 발견했다.
React에서 조건부 렌더링을 사용하려면 코드가 많이 더러워지는데 (특히나 삼항연산자를 사용하려면 더욱 읽기 힘들어진다 ) ,
이를 해결하기 위한 아이디어에 대한 내용이었다.
나도 깊은 공감을 하며 보던 와중

추가적으로 영감을 얻을 수 있는 덧글이 있었고,
재밌어보여서 바로 시작하게되었던 것이다 (샤라웃 투 박진현님, 우디님)

---

기능

원글과 마찬가지로 조건을 condition으로 받아 보다 가독성과 명확성을 높여주며, 조건부 렌더링을 좀 더 선언적으로 표현할 수 있게 됩니다.

<ConditionalRender _if={조건}>
    <ConditionalRender.Then>
        {/* 조건이 참일경우 */}
    </ConditionalRender.Then>
    <ConditionalRender.Else>
        {/* 조건이 거짓일 경우 */}
    </ConditionalRender.Else>
</ConditionalRender>

Code

import React, {PropsWithChildren} from 'react';
import {ReactElement} from 'react';

interface ConditionalRenderProps {
    _if: boolean | (() => boolean);
}

const ConditionalRenderMain: React.FC<PropsWithChildren<ConditionalRenderProps>> = ({_if, children}) => {
    let thenElement: ReactElement = null;
    let elseElement: ReactElement = null;

    React.Children.forEach(children, (child) => {
        if (!React.isValidElement(child)) return;

        if (child.type === Then) {
            thenElement = child;
        }

        if (child.type === Else) {
            elseElement = child;
        }
    });

    const condition = _if instanceof Function ? _if() : _if;

    return condition ? thenElement : elseElement;
};

const Then: React.FC = (props) => <>{props.children}</>;
const Else: React.FC = (props) => <>{props.children}</>;

export const ConditionalRender = Object.assign(ConditionalRenderMain, {
    Then,
    Else,
});

한계

만든 합성 컴포넌트 내의 자식 컴포넌트의 수를 정적으로 검사하는 데에는 한계가 있는 것 같아서 따로 코드상에 주석으로 내용을 포함한다던지, 문서를 남겨놓지 않으면 다른 사람이 봤을때 이해하기 어려울 것 같다는 생각을 했다.

대안

원글처럼 then, else를 각각 props로 넘기는 방법을 사용해야 모르는 사람이 보더라도 단번에 해당 컴포넌트를 활용할 수 있을 것 같다.

결론

이 컴포넌트를 사용함으로써 코드의 가독성과 명확성을 높일 수 있으며, 조건부 렌더링을 좀 더 선언적으로 표현할 수 있게 되었다. 그리고 더욱 타입 작성을 강화하는방식으로 코드를 디벨롭하여 개발자 경험을 향상 시킬 수 있을 것으로 예상된다.