🌌 React 입문 10 - 조건부 렌더링

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다.

조건부 렌더링이란?

• 조건에 따라 렌더링이 달라지는 걸 의미한다.
• 여기서 조건은 프로그래밍 언어에서 보통 일컫는 조건문을 의미한다.

Inline 조건이란?

조건문을 코드 안에 집어넣는 것을 의미한다.

✅ Inline-if

function Mailbox(props) {
    const unreadMessages = props.unreadMessages;
    
    return (
        <div>
            <h1>안녕하세요!</h1>
            {unreadMessages.length > 0 &&
            	<h2>
                    현재 {unreadMessages.length}개의 읽지 않은 메세지가 있습니다.
                </h2>
            }
        </div>
    );
}

• if문을 코드에 직접 넣어 사용하는 방법이다. 실제로는 if 조건문이 아닌 && 논리 연산자를 사용한다.
• Java랑 동일하게 첫 번째 조건문이 true면 두 번째 조건문을 검사하고, false라면 검사하지 않는다.
• 이를 단축 평가라고 한다. 

✅ Inline-if-else

function UserStatus(props) {
    return (
        <div>
            이 사용자는 현재 <b>{props.isLoggedIn ? '로그인' : '로그인하지 않은'}</b> 상태입니다.
        </div>
    );
}

Component 렌더링 막기

// WarningBanner.jsx
function WarningBanner(props) {
    if (!props.warning) {
    	return null;
    }
    
    return (
    	<div>경고!</div>
    );
}

// MainPage.jsx 
function MainPage(props) {
    const [showWarning, setShowWarning] = useState(false);
    
    const handleToggleClick = () => {
    	setShowWarning(prevShowWarning => !prevShowWarning);
    }
    
    return (
    	<div>
            <WarningBanner warning={showWarning}/>
            <button onClick={handleToggleClick}>
            	{showWarning ? '감추기' : '보이기'}
            </button>
        </div>
    );
}

• MainPage.jsx에서 WarningBanner.jsx를 Component로 호출하는데, warning 파라미터를 함께 전달한다.
• false를 warning 파라미터에 담아 전달하면 Component는 null을 반환하므로 렌더링을 하지 않는다.
• 참고로 Class Component의 render() 함수에서 null을 반환하는 것은 Component 생명주기 함수에 영향을 미치지 않기 때문에 componentDidUpdate() 함수는 여전히 호출된다.

실습

return (
    <Box sx=>
        <Typography variant="h6" sx=>워크스페이스</Typography>
        <Divider sx= />
        {isCreating || isEditing ? (
            <CreateWorkspace
                onCancel={handleCancel}
                onWorkspaceCreated={handleWorkspaceCreated}
                onWorkspaceUpdated={handleWorkspaceUpdated}
                workspace={selectedWorkspace}
                isEditing={isEditing}
            />
        ) : (
            <>
                {isAdding ? (
                    <ManageJoin
                        onCancel={handleCancelAdd}
                        workspace={selectedWorkspace.id}
                    />
                ) : (
                    <>
                        <ReadWorkspace
                            workspaceList={workspaceList}
                            onCreateWorkspace={handleCreateWorkspace}
                            onEditWorkspace={handleEditWorkspace}
                            onAddMember={handleAddMember}
                            handleDeleteButtonClick={handleDeleteButtonClick}
                            workspace={selectedWorkspace}
                            setWorkspace={setSelectedWorkspace}
                            memberList={memberList}
                            page={page}
                        />
                        {workspaceList.length > 0 && (
                            <>
                                <Card variant="outlined" sx=>
                                    <Typography variant="body2">
                                        <Chip label="설명" color="primary" variant="outlined" />
                                        {' '}{selectedWorkspace?.description}
                                    </Typography>
                                </Card>
                                <ConfirmDialog
                                    open={isDialogOpen}
                                    onConfirm={handleWorkspaceDeleted}
                                    onClose={handleCancelDelete}
                                    title={'워크스페이스 삭제'}
                                    content={'해당 워크스페이스를 정말 삭제하시겠습니까?\n삭제된 워크스페이스는 복구할 수 없습니다.'}
                                />
                                <MemberTable
                                    memberList={memberList}
                                    page={page}
                                    workspace={selectedWorkspace}
                                    onPageChange={handlePageChange}
                                    onChange={readMemberListInWorkspace}
                                />
                            </>
                        )}
                    </>
                )}
            </>
        )}
    </Box>
);

• 책에서 제공하는 실습 코드가 아닌 토이 프로젝트 v1.0.0 코드이다.
• 만약 isCreating == true || isEditing == true면 워크스페이스 등록 및 수정 화면을 렌더링 한다.
• 위의 조건을 만족하지 않고 isAdding == true면 멤버 추가 화면을 렌더링 한다.
• 두 조건 모두 해당하지 않는다면 워크스페이스 메인 화면을 렌더링 한다.

✅ 워크스페이스 메인 화면

✅ 워크스페이스 등록 및 수정 화면

✅ 멤버 추가 화면

회고

• 이번 실습은 책에서 제공한 실습 내용이 아닌 필자의 토이 프로젝트 v1.0.0 프론트엔드 코드인데, Component 분리가 제대로 안 되어 굉장히 복잡한 구조가 되었다.
• 해당 버전은 프로젝트 자체를 초기화 할 예정인데, 다음에는 조금 더 신경 써서 작성해봐야겠다.