앞서...

프로젝트 배민서바이벌 마이페이지 구현을 60%정도 진행한 것 같다. 그 과정 중 겪었던 문제사항과 해결방법에 대해 적어보고 싶다.

map method & arrow function

🔒 Blocker

monster과제에서 CardList에서 map method를 적용할 때 return을 쓰지 않았다. 하지만 map method는 반드시 값을 반환한다. 즉 return은 생략이 가능하다는 것이다.

function CardList({monster}) {
  return <div className="cardList">
    {monster.map(data => (
      <Card
      id={data.id}
      name = {data.name}
      email={data.email}
      key={data.id}
      />
    ))}
  </div>;
}

따라서 최근 주문 정보 컴포넌트를 mapping을 통해서 만든 RecentOrderList 컴포넌트를 똑같은 방식으로 하려 했으나 RecentOrder 컴포넌트가 렌더링이 되지 않았다.

const RecentOrderList = ({ recentOrder }) => {
  return recentOrder.map(data => {
    const {
      id,
      date,
      order_number,
      image_url,
      name,
      option,
      price,
      quantity,
      order_state,
    } = data;
      <RecentOrder
        key={id}
        date={date}
        orderNumber={order_number}
        img={image_url}
        name={name}
        option={option}
        price={price}
        quantity={quantity}
        orderState={order_state}
      />
  });
};

🔓 해결

에러도 뜨지 않아서 이유가 도데체 뭐지 싶어서 뭔지 한참을 찾았는데 찾을 수 없었다.....
근데 몬스터의 CardList를 보니까 중괄호가 없는것이다!!!!
arrow function의 특징중 하나가

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
// 다음과 동일함: => { return expression; }

statement가 한문장일 경우 중괄호와 return을 생략할 수 있다는것!!!!
나는 map의 인자 뒤 callback함수에 중괄호 즉 함수의 statement가 담길 공간을 넣었기 때문에 반드시 return이 필요한 것이다.(arrow function 규칙)
따라서 return을 넣어주었다.
사소하지만 매우 중요한 것을 학습하였다.

const RecentOrderList = ({ recentOrder }) => {
  return recentOrder.map(data => {
    const {
      id,
      date,
      order_number,
      image_url,
      name,
      option,
      price,
      quantity,
      order_state,
    } = data;
    return (
      <RecentOrder
        key={id}
        date={date}
        orderNumber={order_number}
        img={image_url}
        name={name}
        option={option}
        price={price}
        quantity={quantity}
        orderState={order_state}
      />
    );
  });
};

조건부 렌더링

Mock Data가 없을 경우 NoDataOrder컴포넌트를 렌더링하고 있을 경우 RecentOrderList컴포넌트(그 수에 해당하는 RecentOrder 컴포넌트)를 렌더링한다.

🔒 Blocker

삼항연산자를 통해서 조건부 렌더링을 수행하려 했지만 자꾸 true(mock data가 존재)인 경우에서만 렌더링이 실행되고,
false(mock data가 존재하지 않음)인 경우에 대해서는 실행이 되지 않았다.

const isOrderExists = () => {if (recentOrders.length > 0) {return true}}

{isOrderExists ? (
                <RecentOrderList recentOrder={recentOrders} />
              ) : (
                <NoDataOrder />
              )}

Mockdata가 없는 경우인데 NoDataOrder 컴포넌트가 렌더링되지 않는다.

🔓 해결

사실 조건부렌더링 개념에서는 틀린게 없었다. if-else 렌더링을 inline으로 구현하기 위해 삼항연산자를 쓰는 방법은 전혀 문제가 없다. 참고)리액트공식문서
삼항연산자의 조건문에 전달한 함수(isOrderExists)가 올바른 형식이 아닌 것이다.
함수가 호출이 되어야지 반환된 boolean값에 따라 삼항연산자가 작동하는데 위는 호출을 하지 않았다.
따라서 isOrderExists가 isOrderExists()이어야 한다.

const isOrderExists = () => {if (recentOrders.length > 0) {return true}}

{isOrderExists() ? (
                <RecentOrderList recentOrder={recentOrders} />
              ) : (
                <NoDataOrder />
              )}

근데 사실 변수 개념과 헷갈렸던 것 같다. isOrderExists를 변수로 선언하고 boolean값을 할당하는 방법이 보편적이다.
아래의 코드가 더 깔끔하다.

const isOrderExists = recentOrders.length > 0

{isOrderExists ? (
                <RecentOrderList recentOrder={recentOrders} />
              ) : (
                <NoDataOrder />
              )}

그러면 아래 화면과 같이 mockdata가 없는 경우에 한해 최근 주문된 상품이 없다는 것을 보여주는 NoDataOrder 컴포넌트가 렌더링된다.