27. Final project [Trouble Shooting -1]리액트 무한렌더링-불필요한 렌더링을 막는 리액트 훅 useCallback, useMemo (해결중)

이 에러 밭 무슨 일이죠?

리렌더링이 너무 많이 일어나서 리액트가 자체적으로 infinite loop을 방지하기 위해 렌더링횟수에 제한을 두고있다고합니다. 그래서 화면이 날아가고 보이지 않습니다... 제 멘탈도 하얗게 날아갔습니다...

 

  const onParticipantsChangeHandler = (e) => {
    setParticipants(e.target.value);
  };
  const [participantss, setParticipantss] = useState([]);
  if (participants.length > 0) {
    setParticipantss(participants);
  }

문제의 코드...

 

리렌더링이 되는 케이스

1. 부모 컴포넌트가 렌더링 된 경우
2. 컴포넌트의 state가 변경된 경우
3. 부모로부터 전달받은 props 값이 변경된 경우

 

 

useCallback 이용 : useCallback() 안에서 첫번째 매개변수로 구현하고자 하는 함수가 들어오고, 두번째 매개변수자리에는 의존성 배열이 들어옵니다. 의존성 배열의 역할은 useEffect 와 비슷합니다. 

 

  const onClickHandler = useCallback(() => {
    console.log("hello button!");
  }, []);

useCallback을 사용하면, 함수가 생성되고 나서 재생성되지 않습니다. 하지만 상황에 따라서는 이 함수를 재생성해줘야 할 때가 있습니다. 그러한 경우 의존성배열에 값을 넣어주면 해당 값이 변경되었을 때 이 함수도 같이 재생성됩니다.

 

useMemo 이용:  useCallback과 똑같은 기능을 하는 훅 입니다. 다만, 대상이 함수가 아니라 배열이나 객체와 같은 값일 때 사용합니다. 사용원리와 방법은 모두 useCallback과 같습니다.

  const data = useMemo(() => {
    return [
      {
        id: 1,
        title: "react",
      },
    ];
  }, []);

 

 

 

• useCallback의 대상은 함수, useMemo의 대상은 객체나 배열과 같은 값이다.
  • 원시타입 데이터는 useMemo를 사용하지 않아도 리렌더링하지 않습니다. → useMemo 안써도 됩니다.

 

 

 

 

 

 

그래서 에러 고쳤냐?

못고쳤다~~~~

 

 

근데 이거 왜 쓰냐?

내 시행착오 과정을 기록하고싶었습니다....

해결하게되면 이어서 작성하겠습니다...