팀 프로젝트) 해당 글만 필터하기

화면에서 보여지는 trips 배열의 구조를 분석해 보면, 배열의 각 요소는 trip 객체로 이루어져 있습니다. trip 객체는 여러 가지 속성들을 포함하고 있으며, 대표적으로는 다음과 같은 구조를 가지고 있습니다:

 

[ { author: { email: "a@a.com", // 이메일 주소 name: "이메일", // 작성자 이름 gender: "MALE", // 성별 role: "USER" // 역할 }, authorId: 18, // 작성자 ID createdAt: "2024-09-24T04:16:42.351Z", // 생성 날짜 id: 144, // trip ID reservations: [], // 예약 목록 (현재는 비어 있음) title: "경북대 -> 동대구역 택시 2024-09-24 13:16 동성 2인", // 제목 updatedAt: "2024-09-24T01:21:56.712Z", // 수정 날짜 },

{ author: { email: "b@b.com", name: "홍길동", gender: "MALE", role: "USER" }, authorId: 5, createdAt: "2024-09-23T09:49:54.391Z", id: 140, reservations: [], title: "칠곡운암역 -> 동대구역 택시 2024-09-24 12:49 성별무관 4인 일정 모집중", updatedAt: "2024-09-23T09:49:54.391Z" }, ... ]

배열 구조 설명:

• author: 작성자에 대한 정보가 포함된 객체로, 이메일, 이름, 성별, 역할 등의 세부 정보가 들어 있습니다.
• authorId: 작성자의 고유 ID.
• createdAt: 트립이 생성된 날짜와 시간.
• id: 해당 트립 객체의 고유 ID.
• reservations: 예약 정보를 담고 있는 배열입니다. 현재는 빈 배열로 되어 있습니다.
• title: 트립의 제목으로, 출발지와 도착지, 날짜, 시간 등의 정보가 포함된 문자열입니다.
• updatedAt: 트립이 마지막으로 수정된 날짜와 시간.

이러한 구조에서 trips.map(trip => trip.author.email)과 같은 코드를 사용하면, trips 배열에서 각 trip 객체의 작성자 이메일만을 추출할 수 있습니다.

 

실제사용

import { useState, useEffect } from "react";

import axios from "../api/axios.js";

export function Main() {

  // ... 기존 상태들 ...

  const [currentUserEmail, setCurrentUserEmail] = useState(null);

  useEffect(() => {

    fetchCurrentUser();

    fetchTrips();

  }, []);

  useEffect(() => {

    if (currentUserEmail && trips.length > 0) {

      logMyTrips();

    }

  }, [currentUserEmail, trips]);

  const fetchCurrentUser = async () => {

    try {

      const token = localStorage.getItem('token');

      if (!token) {

        throw new Error('인증 토큰이 없습니다.');

      }

      const response = await axios.get('/users/me', {

        headers: { Authorization: token }

      });

      setCurrentUserEmail(response.data.data.email);

    } catch (error) {

      console.error('현재 사용자 정보를 가져오는 데 실패했습니다:', error);

    }

  };

  const fetchTrips = async () => {

    setIsLoading(true);

    setError(null);

    try {

      const response = await axios.get('/posts/gets');

      console.log('서버에서 받은 데이터:', response.data);

     

      if (response.data && Array.isArray(response.data.data)) {

        setTrips(response.data.data);

      } else {

        throw new Error('서버에서 받은 데이터 구조가 예상과 다릅니다.');

      }

    } catch (error) {

      console.error('포스팅 데이터를 가져오는 데 실패했습니다:', error);

      setError(error.message || '데이터를 불러오는 데 실패했습니다.');

    } finally {

      setIsLoading(false);

    }

  };

  const logMyTrips = () => {

    const myTrips = trips.filter(trip => trip.author.email === currentUserEmail);

    console.log('현재 사용자의 이메일:', currentUserEmail);

    console.log('사용자가 작성한 글:', myTrips);

  };

  // ... 기존 다른 함수들 ...

  return (

    <div id="Main">

      {/* ... 기존 JSX ... */}

      <div className="cnt_board">

        {filteredTrips.map((trip, index) => (

          <div key={trip.id || index} className="card" onClick={() => handleEditClick(trip)}>

            {/* ... 기존 카드 내용 ... */}

          </div>

        ))}

      </div>

    </div>

  );

}