참고 블로그
참고 블로그

조건부렌더링과 옵셔널체이닝

조건부렌더링

• 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미

• 내 코드에서 예시

{listReducer.image !== undefined && (
  // listReducer.image가 undefinded가 아닐 경우에만 렌더링
                <img
                  className="h-12 w-12 object-cover rounded-lg"
                  src={listReducer.image.imgUrl}
                />
              )}

근데 이렇게 해도 죽어도 안 먹히는 애들이 있다. 아니면 따로 따로 조건을 지정해줘야 하는 경우가 있는데 이 때 사용한 방식이 자바스크립트의 비교적 최신 문법인 옵셔널체이닝이다.

옵셔널체이닝

• nullish한(null or undefined) 값을 할당하고 있는 경우에 에러를 반환하지 않고 undefined를 반환
• 값이 누락될 가능성이 있는 경우에 옵셔널 체이닝을 사용하면 프로그램의 안정성을 높일 수 있고 보다 간단하게 표현

  클라이언트 입장에서 이상한 화면 뜨게 하는 것보단 일단 뭐든 띄워야 하니까..? 뭐 코딩애플 영상보다 보면 그런 역할도 한다고 한다. 에러로 아무것도 안 나오게 하는 것보단 나으니까 쓴다고.. 뭐 내가 이해한게 맞는지는 모르겠다.

• 내 코드에서 예시

<div>
                    <label>{post?.title}</label>
                  </div>
                  <div className=" mt-1 text-base font-semibold">
                    <label>{post?.userPrice?.toLocaleString("ko-KR")}원</label>
                  </div>
                  <div className="flex justify-between mt-4 text-DD  text-xs font-normal">
                    <div>{post?.createdAt}</div>
                    <div className="flex items-center">
                      <img className="h-3 mr-1" src={bookmark8D} />
                      <div className="mx-[1px]">{post?.likeCnt}</div>

// 각 케이스별로 undefined가 나올 수 있을 nullish한 경우를 다 옵셔널체이닝 걸어서 막은 예시