TIL : 무한 렌더링(..ing)

🌼 Bad Request

 

API 연동 코드는 제대로 한 것 같은데  Bad Request가 떴다. 헤더에 토큰을 안넣고 보내고 있었다,, :>

 

Bad Request는 HTTP 상태 코드 400을 나타내며, 클라이언트가 서버에 잘못된 요청을 보냈을 때 발생한다.

주요 원인으로는,

 

1. 잘못된 URL 형식

2. 잘못된 요청 매개변수

3. 잘못된 헤더

4. 세션 또는 인증 문제

 

---

 

🌼  무한 렌더링 문제 

  만약에 선택된 태그들 있으면 표시되도록 하고
  userTags.data =[{id:3, name:embeded},{id:4, name:ios}]
  useEffect(()=>{
    if(userTags){
      const selectedUserTags = userTags.data.map(tags=>tags.id -1); //[3.4] -1 번째를 true로
      const updatedList = [...clickedList];
      selectedUserTags.forEach(index => {
        updatedList[index] = true;
        }
      });

      setClickedList(updatedList);
    }
  },[userTags, clickedList, setClickedList]);

이렇게 했을 때 무한 렌더링 일어남 

https://velog.io/@summereuna/%EB%A6%AC%EC%95%A1%ED%8A%B8-useEffect-%EB%AC%B4%ED%95%9C-%EB%A3%A8%ED%94%84-%ED%83%88%EC%B6%9C%ED%95%98%EA%B8%B0

🔥 React: 리액트 useEffect 무한 루프 탈출하기

 

 

 

useEffect에서 상태를 업데이트할 때 무한 루프가 발생할 수 있습니다. 이는 useEffect의 의존성 배열에 있는 상태나 함수가 변경될 때마다 useEffect가 계속해서 실행되기 때문입니다. 이 경우에는 상태 업데이트를 조정하여 무한 루프를 방지할 필요가 있습니다.

가장 일반적인 원인은 clickedList를 업데이트할 때마다 useEffect가 다시 실행되는 것입니다. 이는 useEffect의 의존성 배열에 clickedList가 포함되어 있기 때문에 발생합니다.

 

해결 방법:

상태 업데이트 조건 추가:

• clickedList를 업데이트할 때 특정 조건을 만족할 때만 setClickedList를 호출하도록 하여 불필요한 렌더링을 방지할 수 있습니다. 예를 들어, isEqual 변수를 사용하여 이전 clickedList와 새로운 updatedList가 다를 때만 업데이트하도록 할 수 있습니다.
• useEffect(() => {
    if (userTags) {
      const selectedUserTags = userTags.data.map((tag) => tag.id - 1);
      const updatedList = [...clickedList];
  
      selectedUserTags.forEach((index) => {
        if (index >= 0 && index < updatedList.length) {
          updatedList[index] = true;
        }
      });
  
      // clickedList가 실제로 변경되었는지 확인합니다.
      const isEqual = clickedList.every((value, index) => value === updatedList[index]);
  
      if (!isEqual) {
        setClickedList(updatedList);
      }
    }
  }, [userTags, clickedList, setClickedList]);

추가 고려 사항:

• 불필요한 렌더링 방지: useEffect 내에서 상태를 업데이트할 때는 불필요한 렌더링이 발생하지 않도록 조심해야 합니다. 상태 업데이트 시에는 항상 이전 상태와 비교하여 실제 변경이 있는 경우에만 업데이트하는 것이 좋습니다.
• 의존성 배열 관리: useEffect의 의존성 배열을 올바르게 관리하여 원하는 동작을 수행할 수 있도록 해야 합니다. 필요한 상태와 함수만 포함되도록 주의깊게 설정하세요.

이 방법들을 활용하여 useEffect에서 발생하는 불필요한 렌더링을 줄이고, 콘솔에 뜨는 로그를 줄일 수 있습니다.