[프로젝트 개발일지] OOTD state 변경 시 깜빡임 문제 해결

Before we start...

 

내가 직면한 오류(?) 라고 하기에는 거창하지만

 

state의 값이 변경될 때 혹은 query를 날릴 때 select의 값이 깜빡이는 문제가 있었다.

 

결론은 해결했다...!

 

2024.03.08 - [⭐ 𝐩𝐫𝐨𝐣𝐞𝐜𝐭𝐬/project 개발일지] - [프로젝트 개발일지] OOTD - 장바구니 Select (선택 사항)

[프로젝트 개발일지] OOTD - 장바구니 Select (선택 사항)

 

How did I fixed these problem?

 

어떻게 해결했는지 알려주겠다.

 

우선 전에 있던 코드를 살펴보면

 

  useEffect(() => {
    const fetchData = async () => {
      await getCartData();
      handleCheckAllChange();
    };
    fetchData();
    setAllChecked(isAllchecked());
  }, [state]);

  useEffect(() => {
    setAllChecked(isAllchecked());
  }, [checkedItems])

 

 

이런식으로 쓸데없이 useEffect를 두번이나 호출하는 바보같은 행동을 하고있었다.

 

우선 쓸데없는 useEffect 호출을 줄여주고 

 

의존성 배열을 빈배열로 만들어주면서 mount 될때 한번만 데이터를 가져오게끔 하고 전체 선택을 하게 해 줬다.

 

  useEffect(() => {
    const fetchData = () => {
      getCartData();
      handleCheckAllChange();
      setAllChecked(isAllchecked());
    };
    fetchData();
    console.log('useEffect 호출1...')
  }, []);

 

그리고 대망의 전체 선택과 select선택할때 혹은 +, - 버튼을 눌렀을 때 Rerendering 하지 않도록 해주려고

 

useMemo를 사용했다...!

 

2024.02.22 - [📁 𝐫𝐮𝐧𝐭𝐢𝐦𝐞𝐄𝐧𝐯𝐢𝐫𝐨𝐧𝐦𝐞𝐧𝐭/React.js] - [React .hook] What is useMemo ?

[React .hook] What is useMemo ?

2024.02.23 - [📁 𝐫𝐮𝐧𝐭𝐢𝐦𝐞𝐄𝐧𝐯𝐢𝐫𝐨𝐧𝐦𝐞𝐧𝐭/React.js] - [React .hook] Examples of using useMemo

[React .hook] Examples of using useMemo

 

useMemo를 잘 모르는 사람은 이 글을 읽고 오길 추천한다...!

 

그렇다 나는 초기에 mount 될때만 fetchData함수를 호출하고 싶었고

 

각기 다른 state들은 다른 의존성을 주입하고 싶었다.

 

쉽게 말하자면, 그냥 각자 행동할 수 있게 독립적이게 만들어주고 싶었다.

 

어떠한 값의 변화를 감지하고 그값이 변경되었을 때 데이터를 가져오는 

 

api를 동작해야하기 때문에

 

무거운 동작으로 생각했다.

 

그러면?

 

무거운동작이 어떠한 값의 변경이 있을때만 동작하게하려한다?

 

===>> useMemo, useCallback 이 두개가 생각이 났다.

 

근데 왜인지는 모르겠지만 useCallback은 동작하지 않았다.

 

혹시 이 부분에 대해서 아는 분이 있으면 꼭 댓글로 알려주시면 감사하겠습니다....ㅠ

 

따라서 전체선택 하는 버튼을 눌렀을 때도 useEffect와 별개가 되었고

 

수량과 사이즈를 변경하여도 useEffect호출과는 무관하게 되었다.

 

결론은 깔끔하게 해결...!