마이픽 페이지

1) 마이픽 기능

const [myPickData, setMyPickData] = useState([]);
const [selectedPick, setSelectedPick] = useState({
    id: "",
    imageUrl: "",
    name: "",
    boardGameCategories: "",
  });
  
  
  //myPick api
  useEffect(() => {
    const token = localStorage.getItem("token");
    if (!token) {
      console.error("No token found");
      return;
    }
    const fetchPickData = async () => {
      try {
        const myPickData = await getMyPick(token);
        setMyPickData(myPickData);
        setLoading(false);
      } catch (err) {
        setError(err.message);
        setLoading(false);
      }
    };
    fetchPickData();
  }, []);
  
  
   useEffect(() => {
    if (myPickData.length > 0) {
      setSelectedPick({
        id: myPickData[0].id,
        imageUrl: myPickData[0].imageUrl,
        name: myPickData[0].name,
        boardGameCategories: myPickData[0].boardGameCategories,
      });
    }
  }, [myPickData]);

문제 1)

보드게임을 픽했을 때 새로고침을 해야지만 추가된 보드게임을 볼 수 있었다.
그걸 해결하기 위해서 myPickData가 바뀔때마다 리렌더링이 될 수 있도록 수정하였었다

//myPick api
  useEffect(() => {
    const token = localStorage.getItem("token");
    if (!token) {
      console.error("No token found");
      return;
    }
    const fetchPickData = async () => {
      try {
        const myPickData = await getMyPick(token);
        setMyPickData(myPickData);
        setLoading(false);
      } catch (err) {
        setError(err.message);
        setLoading(false);
      }
    };
    fetchPickData();
  }, [myPickData]);

문제 2)

그렇게 해결된 줄 알았더니....
이렇게 되면 마이픽 데이터 중 픽된 보드게임을 선택하면
내가 원하는 보드게임으로 선택할 수 없는 상태가 되어버렸다..

  useEffect(() => {
    if (myPickData.length > 0) {
      setSelectedPick({
        id: myPickData[0].id,
        imageUrl: myPickData[0].imageUrl,
        name: myPickData[0].name,
        boardGameCategories: myPickData[0].boardGameCategories,
      });
    }
  }, []);

그래서 myPickData를 지우고 빈배열로 한번만 실행되도록...
이렇게하니 selectedData의 상태변화가 안되던 문제는 해결

문제 3)

하지만 또 다른 문제점~
위에서 selectedData의 초기값을 지정해둔 값들이 작동하지 않는다....

해결!!

const [myPickData, setMyPickData] = useState([]);
const [selectedPick, setSelectedPick] = useState({
    id: "",
    imageUrl: "",
    name: "",
    boardGameCategories: "",
  });
  
  
  //myPick api
  useEffect(() => {
    const token = localStorage.getItem("token");
    if (!token) {
      console.error("No token found");
      return;
    }
    const fetchPickData = async () => {
      try {
        const myPickData = await getMyPick(token);
        setMyPickData(myPickData);
        setLoading(false);
      } catch (err) {
        setError(err.message);
        setLoading(false);
      }
    };
    fetchPickData();
  }, [myPickData]);
  
  
  
  //마이픽 초기값 설정
  useEffect(() => {
    if (myPickData.length === 0 || selectedPick.id) return;
    setSelectedPick({
      id: myPickData[0].id,
      imageUrl: myPickData[0].imageUrl,
      name: myPickData[0].name,
      boardGameCategories: myPickData[0].boardGameCategories,
    });
  }, [myPickData]);


  //마이픽 선택
  const handleClickPick = (id, imageUrl, name, boardGameCategories) => {
    setMyPickOn(!myPickOn);
    setSelectedPick({
      id: id,
      imageUrl: imageUrl,
      name: name,
      boardGameCategories: boardGameCategories,
    });
  };

1. myPickData는 추가될 때마다 useEffect가 실행될 수 있도록 myPick api에 myPickData를 의존성 배열로 지정
2. 마이픽 선택 + 초기값 설정

• myPickData가 업데이트 될때마다 useEffect가 작동하도록하되
• 이미 선택된 게임이 있을 땐 초기값을 설정할 필요 없다.
  ➱ myPickData가 없을 때와 이미 선택된 값이 없을 땐 초기값이 작동하지 않도록 조건문 추가
  그렇지 않은 경우엔 초기값을 [0]값으로 지정한다!!

2) 픽된 보드게임 유지

PickedItem 속에 id가 있으면 true를 출력하도록 했었다.
picked가 true인 요소들이 유지가 되지 않아서 문제였다.

LocalStorage에 픽된 보드게임의 id를 저장해보기도 했지만 localStorage가 초기화되면 의미가 없었다.
그래서 백엔드분께 요청하여 LocalStorage에 적용한 방법을 서버에 배열로 저장되게 할 수 있도록 요청드려
해당 api를 불러와 픽된 요소들이 유지될 수 있도록 적용시켰다..

---

하나 수정하면 다른게 문제가 발생하고 해서 꽤나 골치가 아프긴했다..
경우의 수를 잘 생각해서 예외의 경우에 대한 조건을 잘 달아줘야할 것 같다..ㅠ