Conditional-rendering

리액트 작업 시 서버에서 값을 받아올 때 typeError, null 등으로 오류날 때가 있다. 보내는 값도, 코드도 백엔드도 정상이다. 이때 점검해봐야 할 게 하나 있다. 바로 Conditional-rendering이다. 

 

우리는 서버에서 받아온 값을 변수에 넣어 사용한다. 변수는 선언되었지만, 서버에서 값이 넘어오지 않았다면 어떨까. 아무것도 없는 값이다. 아무것도 없는 데 화면에 띄운다면 당연히 에러날 수밖에 없다. 서버에서 응답(원하는 값)이 넘어왔을 때 화면에 다시 화면에 그리도록 하는 조건이 필요하다. 다시 그리도록 조건문을 세우는 게 Conditional-rendering이다.

 

사용 방법

Conditional-rendering에는 AND연산자(&&), 삼항연산자, 옵셔널체이닝(Optional Chaining) 3가지 방법이 있다. 3가지 방법 모두 표현 방법만 다를 뿐, 기본 동작 원리는 같다.

 

1. AND연산자(&&)

            {P.fetchBoardsData &&
              P.fetchBoardsData.fetchBoards.map((board) => (
                <Link href={`/boards/${board._id}`} key={board._id}>
                  <S.ListContent>
                    <S.ContentNumber>{board._id}</S.ContentNumber>
                    <S.ContentTitle>{board.title}</S.ContentTitle>
                    <S.ContentWriter>{board.writer}</S.ContentWriter>
                    <S.ContentDate>
                      {dateFormatter(board.createdAt)}
                    </S.ContentDate>
                  </S.ListContent>
                </Link>
              ))}

위 코드는 게시판 리스트에서 게시글 목록을 띄우는 코드다. 서버에서 받아온 값을 P.fetchBoardsData에 담아오고, 이 값을 map을 통해 게시글로 나열한다. 여기서 서버에서 값을 받아 왔을 경우에 띄우도록 조건문을 AND 연산자로 설정했다. && 연산자는 양쪽 조건 값이 모두 참일 때 실행한다. 즉 왼쪽에서 받아온 값이 없다면 빈값인 상태로 falsy 값으로 판단해 해당 구문을 실행하지 않고 넘어간다. 따라서 오류가 발생하지 않게 된다. 값을 받아왔다면? 양쪽 다  true가 되기 때문에 해당 값을 실행한다. 즉, 게시글 목록이 띄워진다.

 

2. 삼항연산자

            {P.fetchBoardsData
              ? P.fetchBoardsData.fetchBoards.map((board) => (
                  <Link href={`/boards/${board._id}`} key={board._id}>
                    <S.ListContent>
                      <S.ContentNumber>{board._id}</S.ContentNumber>
                      <S.ContentTitle>{board.title}</S.ContentTitle>
                      <S.ContentWriter>{board.writer}</S.ContentWriter>
                      <S.ContentDate>
                        {dateFormatter(board.createdAt)}
                      </S.ContentDate>
                    </S.ListContent>
                  </Link>
                ))
              : null}

삼항 연산자로 바꾸었다. 삼항 연산자는 조건이 참이면 콜론을 기준으로 앞을 실행, 거짓이면 뒤를 실행한다. 이를 활용해 받아온 값이 있다면 true로 앞을 실행하고, 값이 없다면 falsy로 뒤쪽 null을 반환해 오류 없이 끝난다.

 

3. 옵셔널체이닝

            {P.fetchBoardsData?.fetchBoards?.map((board) => (
              <Link href={`/boards/${board._id}`} key={board._id}>
                <S.ListContent>
                  <S.ContentNumber>{board._id}</S.ContentNumber>
                  <S.ContentTitle>{board.title}</S.ContentTitle>
                  <S.ContentWriter>{board.writer}</S.ContentWriter>
                  <S.ContentDate>
                    {dateFormatter(board.createdAt)}
                  </S.ContentDate>
                </S.ListContent>
              </Link>
            ))}

옵셔널 체이닝은 가장 최근에 나온 방법이다. 값의 존재 유무를 판단할 값 뒤에 물음표를 넣으면 끝이 난다. 위 코드대로라면, P.fetchBoardsData의 값이 있다면 그 이하를 실행해라. 있다고 한다면 fetchBoards를 실행할 텐데 여기도 옵셔널체이닝이 있으니, fetchBoards값도 있는지 없는지 먼저 확인할테다. 있다면 map()을 실행한다.

 

결론

데이터를 받아오는 로직을 짰다고 끝이 아니다. 이 결과 값이 원하는 시간에 제대로 도착했는지까지 확인해야 한다. 원하는 시간에 값이 도착하지 않았을 때도 어떻게 처리할 것인지도 염두해야 한다. Conditional-rendering이 있는 이유이다.

 

※ 잘못된 내용이 있을 경우 댓글로 알려주세요. 배우고 익히고 수정하겠습니다:)