[react] Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

이 오류 메시지는 React에서 객체를 직접 렌더링하려고 시도할 때 발생합니다. 객체를 렌더링하는 대신, 문자열 또는 JSX 요소와 같은 React에서 유효한 요소를 렌더링해야 합니다. 이 오류는 종종 JavaScript의 Promise 객체를 반환하는 함수를 호출하고 그 결과를 렌더링하려고 시도할 때 발생합니다.

이 문제를 해결하려면 다음 단계를 따라주시기 바랍니다.

Promise를 사용하여 데이터를 가져오는 로직을 useEffect 또는 다른 적절한 라이프 사이클 메서드에서 호출하고, 가져온 데이터를 컴포넌트의 상태로 저장하세요.
상태로 저장된 데이터를 렌더링 코드에서 사용하고, 데이터가 유효한지 확인하고 예외 상황을 처리하세요 (예: 로딩 중이거나 가져오기가 실패한 경우).
완료된 상태에서만 벨리드한 React 요소(예: 문자열, 숫자, JSX 요소 등)를 렌더링할 때를 보장하세요.
예를 들어, fetchData라는 Promise를 반환하는 비동기 함수가 있다면, 아래와 같이 수정할 수 있습니다.

javascript
import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchData()
      .then((response) => {
        setData(response);
        setIsLoading(false);
      })
      .catch((error) => {
        setError(error);
        setIsLoading(false);
      });
  }, []);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <p>Data: {data}</p>
    </div>
  );
}

export default MyComponent;

위 예제에서는 useEffect를 사용하여 컴포넌트가 마운트될 때 데이터를 가져옵니다. 가져온 데이터는 상태로 저장되며, 로딩 중이거나 에러가 발생한 경우에 대한 예외 처리를 수행합니다. 이렇게 하면 유효한 React 요소만 렌더링하게 됩니다.

---

import { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import profile from "../../contents/profile.png";
import profileLoggedIn from "../../contents/checked.png";
const axios = require("axios");

const BtnProfile = async ({ isLoggedIn }) => {
console.log(isLoggedIn);
let profileImg = profile;

// 로그인 시 프로필 사진 변경
if (isLoggedIn) {
const response = await axios.get("http://localhost:8123/users/profileImg", {
withCredentials: true,
});
console.log(response);
}

return (
<Link
  to="/setting"
  className="btn-profile"
  style={{
    display: "flex",
    alignItems: "center",
    textDecoration: "none",
  }}
>
  <img src={profileImg} width="50vw" alt="profile" />
</Link>
);
};
export default BtnProfile;

여기서 에러가 난거같아

이 코드에서 문제가 되는 부분은 함수형 컴포넌트 내에서 async 함수를 사용하고 있습니다. React의 함수형 컴포넌트에서는 useEffect 훅을 사용하여 비동기 작업을 수행해야 합니다.

또한 프로필 이미지를 로드한 후 상태로 저장하도록 수정해야 합니다. 이렇게 수정하면 동작이 올바르게 수행됩니다.

다음은 수정한 코드입니다.

import { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import profile from "../../contents/profile.png";
import profileLoggedIn from "../../contents/checked.png";
const axios = require("axios");

const BtnProfile = ({ isLoggedIn }) => {
  const [profileImg, setProfileImg] = useState(profile);

  useEffect(() => {
    const fetchProfileImage = async () => {
      if (isLoggedIn) {
        try {
          const response = await axios.get("http://localhost:8123/users/profileImg", {
            withCredentials: true,
          });
          console.log(response);
          // 로그인 시 프로필 사진 변경
          setProfileImg(profileLoggedIn);
        } catch (error) {
          console.error(error);
          setProfileImg(profile);
        }
      }
    };

    fetchProfileImage();
  }, [isLoggedIn]);

  return (
    <Link
      to="/setting"
      className="btn-profile"
      style={{
        display: "flex",
        alignItems: "center",
        textDecoration: "none",
      }}
    >
      <img src={profileImg} width="50vw" alt="profile" />
    </Link>
  );
};

export default BtnProfile;

이렇게 수정하면 useEffect를 사용하여 로그인 여부에 따라 프로필 이미지를 가져오는 로직이 수행됩니다. isAuthenticated가 변경될 때마다 useEffect가 실행되고, 이미지 로드가 완료되면 profileImg 상태를 업데이트하여 렌더링됩니다. 만약 에러가 발생하면 기본 프로필 이미지로 설정합니다.