TIL 17 | React 조건부 렌더링 코드 리뷰

클론 프로젝트를 시작하면서 상품리스트페이지와 상품 디테일 페이지 부분을 구현하고 있다! 기능을 구현 하면서 리액트의 라이프 사이클을 생각하면서 조건부 렌더링을 썼던 나의 코드를 리뷰하고자 한다!

자식컴포넌트 Card.js 렌더 부분 코드

render() {
    const { product } = this.props;

    return (
      <div className="Cards">
        <li onClick={this.goToDetail} className={product.id}>
          <img src={product.img_url} alt="제품 사진" />
          <div className="conditionBox">
            {product.label.map(label => {
              return (
                <React.Fragment key={label}>
                  {label.type === 'new' && <span className="new">New</span>}
                  {label.type === 'best' && <span className="best">Best</span>}
                  {label.type === 'vegun' && (
                    <span className="vegun">Vegun</span>
                  )}
                </React.Fragment>
              );
            })}
          </div>
          <div className="prdInfo">
            <span className="Name">{product.name}</span>
            <span className="hashtag">{product.description}</span>
            <span className="price">{product.price}</span>
          </div>
        </li>
      </div>

아래와 같이 조건부 렌더링을 추가했다.

  <div className="Cards">
  {product && (
        <li onClick={this.goToDetail} className={product.id}>

그런데 코드 리뷰를 받아보니 여기서 조건부 렌더링을 할 필요가 없었다!

product는 객체 형태로 들어오기 때문에 boolean 값을 체크하면 항상 true가 리턴된다. 즉, 조건부 렌더링을 하는 의미가 없다는 뜻!

결국 조건부 렌더링을 할때 빈객체도 true값이 되기 때문에 이 컴포넌트를 호출하는 부모 컴포넌트에서 객체 안의 data의 접근 해서 적절한 조건부 렌더링이 필요하다!