async await pending문제, find() undefined 문제

1. pending
   api를 따로 빼서 관리하고 import해와서 썼는데 작동을 안함.
   pending -> fullfilled상태에서 넘어가질 않았다.
   async await 짝을 지어주지 않아서 생긴 문제였음....!
   await을 안썼음ㅋㅋㅋㅋㅋㅋㅋ 후

2. undefined
   분명히 콘솔찍으면 나오는데 undefined가 나오는거다...
   메서드가 잘못인가해서 find()말고 includes, map 머 다른거로 해봤는데 그래도 안됨.
   혹시나 해서 return 써주니까 됨...ㅠㅠㅠ
   리턴은 기본이다...!!!!

const FriendCard = ({ friend }) => {
  const [palette, setPalette] = useState([]);
  const paletteCode = 'P001';

  useEffect(() => {
  //---------- 1번문제 발생지점 ------------------
    const fetchData = async () => {
      const data = await getSpecificPalette({ paletteCode });
      setPalette(data);
    };
    fetchData();
  }, []);
  //--------------------------------------------
  //------------- 2번문제 발생지점 ------------------
  const friendsColor = palette.find(mycolor => {
    return mycolor.mood === friend.mood;
    // console.log(mycolor.mood === friend.mood ? mycolor : 'nope'); 
    //여기서는 값이 나오는데!!
  });
  console.log(friendsColor); //undefined가 나오는 이유가?? 리턴을 하지않아서였음!
  //---------------------------------------------
  return (
    <Card>
      <MoodPic></MoodPic>
      <FriendName>{friend.username}</FriendName>
      <FriendName>{friend.mood}</FriendName>
    </Card>
  );
};

export default FriendCard;

모아놓고보니 정말... 기본중의 기본이구나
기본이 가장 중요하다는 걸 다시한번 느낀다.
요걸 못찾아서 몇시간을 헤맸네....