리액트 핵심만 훑어보자 #10 조건부 렌더링

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

 

조건부 렌더링이란?

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

 

인라인 조건이란?

• 조건문을 코드 안에 집어넣는 것을 의미한다. 코드를 살펴보자.

 

인라인 if

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

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

자바에서는 단락 평가라고 하던 것 같은데 어느 쪽이든 원리만 이해하면 된다.

 

인라인 if-else

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

내가 좋아하는 삼항 연산자다.

 

컴포넌트 렌더링 막기

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를 컴포넌트로 호출하는데, warning 파라미터를 함께 전달하는 것이다.
• false를 warning 파라미터에 담아 전달하면 컴포넌트는 null을 반환하므로 렌더링을 하지 않는다.
• 참고로 클래스 컴포넌트의 render() 함수에서 null을 반환하는 것은 컴포넌트 생명주기 함수에 영향을 미치지 않는다고 한다.
• 예를 들어 componentDidUpdate() 함수는 여전히 호출된다.

 

실습

return (
    <Box sx={{ padding: "20px" }}>
      <Typography variant="h6" sx={{ marginBottom : '10px' }}>워크스페이스</Typography>
      <Divider sx={{ marginBottom : '15px' }}/>
      {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={{ padding: 2, marginTop: 2, maxWidth: 600 }}>
                    <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>
  );

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

 

워크스페이스 메인 화면

 

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

 

멤버 추가 화면

데이터 상태는 좀 창피하네요 😳

 

이미지 출처

[React] Component 를 사용하는 기본적인 방법

소플 - soaple.io