마이페이지에서 나의 신청내역 모아보기

사용자가 여러 건을 신청했다면, 마이페이지에서 모두 모아볼 수 있어야 한다. 단, 로그인한 현재 사용자의 내역들만 보여주어야 한다.

여기서는 이전 포스팅에서 생성했던 주문번호를 표기해 각각의 주문건을 보여주는 영역을 만든다.
원하는 신청건을 누르면 작성한 내용을 보고 수정할 수 있는 해당 신청 내역 작성 페이지로 이동할 수 있도록 만드는 것이 목표이다.

🍦 사용자 정보 가져오기

my page로 이동할 때 history.location.state에 userID를 저장해 두었다. 여기서 그 아이디를 받아온다.

  const history = useHistory();
  const historyState = history?.location?.state;
  const [userId, setUserId] = useState(historyState && historyState.id)
  let orderNoKeys;

🍰 database에서 사용자 정보를 가져오는 함수 정의하기

별도의 database.js 파일에서 정의해두었다.
userId하위의 정보들을 가져온다.

data가 있다면 원하는 콜백함수를 사용할 수 있도록 콜백함수를 인자로 사용해준다.

  viewData(userId, showData) {
    const dataRef = firebaseApp.database()
      .ref(`${userId}/`);
    dataRef.on('value', (snapshot) => {
      const data = snapshot.val();
      data && showData(data);
    });
  }

🍰 My Page 컴포넌트에서 사용자 정보 가져오기

앞에서 전달받아왔던 user의 Id는 이 컴포넌트에서 userId라는 state훅에 저장되어있다.

이 userId를 인자로 전달해주면, 현재로그인한 유저의 아이디값을 데이터베이스에서 찾아 그 하위의 정보들을 받아와준다.

  database.viewData(userId, (data) => {
    orderNoKeys = Object.keys(data)

  })

data에는 해당 아이디 아래의 주문번호와 그 하위 정보들이 반환된다.

🍦 각각의 신청내역 정보 표시하기

🍰 Object.keys() - 주문번호만 받아오기

Object.keys를 활용해 key값인 주문번호만 받아올 수 있도록 orderNoKeys를 지정해준다.

반환값 : [1634616783224, 1634616791518, 1634616797262]

🍰 map() - My Order 컴포넌트로 전달

MyPage컴포넌트에서 새로운 컴포넌트에 map을 활용해 하나하나 전달하도록 한다. 여기서 새로운 컴포넌트를 만드는 이유는, 동일한 UI를 재사용할 것이기 때문이다. 또한 같은 형태의 데이터를 각각 분리해 UI를 구성하기 떄문이다.

  return (
    <>
      <h1>mypage</h1>
      <div className={styles.orders}>
        {orderNoKeys.map(orderNoKey=>
          <MyOrder orderNo={orderNoKey}/>
        )}
      </div>
    </>
  )};

🍰 My Order 컴포넌트에서 받아와 렌더링

const MyOrder = ({orderNo}) => {

  return (
    <ul className={styles.order}>
      <h4>Order</h4>
        <p>주문번호 : {orderNo}</p>
    </ul>
  )};

🍦 결과

아주 간단하게만 만들었지만, 이렇게 각각의 주문번호 별로 신청 내역을 보여줄 수 있게 되었다.
이 다음에는 클릭한 신청내역의 작성정보를 세부적으로 각각 보여줄 수 있도록 만드는 것이 목표이다.

Reference

Mozilla - Object.keys()