React에서 DRY 코드와 Fragments를 사용하여 조건적으로 여러 자식 컴포넌트를 렌더링하는 방법

제목: 여러 개의 자식 컴포넌트와 함께 React 조건부 렌더링을 쉽게 구현하기

소개

React를 사용할 때, 특정 상태에 기반하여 여러 개의 자식 컴포넌트를 조건부로 렌더링해야 하는 경우가 자주 발생할 수 있습니다. 이러한 경우에는 코드를 DRY(Don’t Repeat Yourself)하게 유지하고 효율적인 해결책을 찾는 것이 중요합니다. 본 블로그 포스트에서는 이 문제를 해결하고 깔끔하고 가독성 있는 코드를 유지하기 위한 간단한 접근 방식을 제시하고자 합니다.

여러 개의 자식 컴포넌트 렌더링에 관한 문제

기본적으로 React는 인접한 JSX 요소를 하나의 포괄적인 태그로 둘러싸야 한다는 규칙을 가지고 있습니다. 그러나 여러 개의 자식 컴포넌트를 직접 렌더링하려고 할 때, “인접한 JSX 요소는 둘러싸는 태그로 묶어야 합니다.”라는 SyntaxError가 발생할 수 있습니다.

해결책 1: 컨테이너로 요소 둘러싸기

이 문제를 해결하기 위한 간단한 방법은 모든 자식 컴포넌트를 컨테이너 요소(예: <div>)로 감싸는 것입니다. 모든 컴포넌트를 캡슐화함으로써 하나의 요소만 반환되도록 보장합니다. 다음은 이를 구현하는 예시입니다:

export default ({ changeState, myState, handleClick }) => (
    <Navigation>
        <div>
            <h1>Navigation</h1>
            <button onClick={() => changeState()}>Navigation</button>
            {myState ? (
                <>
                    <NavigationItem handleClick={handleClick} title={'#Link-1'} />
                    <NavigationItem handleClick={handleClick} title={'#Link-2'} />
                    <NavigationItem handleClick={handleClick} title={'#Link-3'} />
                </>
            ) : null}
        </div>
    </Navigation>
)

해결책 2: React 프래그먼트 사용하기

DOM에 추가적인 요소를 추가하지 않고 여러 요소를 그룹화하기 위해 React 프래그먼트를 사용하는 또 다른 접근 방식이 있습니다. 프래그먼트를 사용하면 추가적인 래핑 컨테이너 없이 여러 요소를 그룹화할 수 있습니다. 다음은 React 프래그먼트를 사용한 코드의 업데이트된 버전입니다:

import React, { Fragment } from 'react';

export default ({ changeState, myState, handleClick }) => (
    <Navigation>
        <h1>Navigation</h1>
        <button onClick={() => changeState()}>Navigation</button>
        {myState ? (
            <Fragment>
                <NavigationItem handleClick={handleClick} title={'#Link-1'} />
                <NavigationItem handleClick={handleClick} title={'#Link-2'} />
                <NavigationItem handleClick={handleClick} title={'#Link-3'} />
            </Fragment>
        ) : null}
    </Navigation>
)

결론

React에서 여러 개의 자식 컴포넌트를 조건부로 렌더링하는 것은 어렵지 않습니다. 래퍼 컨테이너 또는 React 프래그먼트를 사용하여 코드를 깔끔하고 유지 가능하며 DRY하게 유지할 수 있습니다. 사용 사례에 가장 적합한 해결책을 선택하고 효율적이고 가독성 있는 코드의 이점을 누려보세요!

React와 JSX에서 조건부 렌더링에 대한 자세한 내용은 이 링크에 제공된 Medium 포스트를 확인하면 대안적인 시각과 이 주제에 대한 통찰력을 얻을 수 있습니다.

참고 자료 : 

reactjs