[React] 🔄️무한 렌더링 원인 찾기

다이닝 코드 미니프로젝트의 기능은 좋아요 버튼을 클릭했을 때 좋아요 목록 페이지에 들어가 보면 클릭했던 장소를 모두 확인 할 수 있다. 그렇지만 setState로 변경했을 때만 발생하는 에러가 있었다. 그것에 대해서 기록을 하자면 ..

전체코드

//App.js

  const place = data;
  const [addPlace, setAddPlace] = useState([]);

App.js 파일에서 data저장되어 있는 카페 목록들을 place 변수에 담아주었고, 내가 좋아요한 목록들을 확인 할 수 있게 addPlace의 초기값을 빈배열로 주었다. 물론 App.jsx 파일에서 만든 state이기 때문에 필요한 곳에는 props를 구조분해문법으로 내려주었다.

//LikePage.jsx

const LikePage = ({ addPlace, navigate }) => {
  return (
    <Container>
      <Title>
        <img
          src={mainlogo}
          alt="메인로고"
          width="20%"
          height="100%"
          onClick={() => navigate("/")}
        />
      </Title>
      <LikePlace>
        {addPlace.map((item, i) => (
          <PlaceItem key={i}>
            <img src={getCafeImage(item.id)} width="220px" alt={item.title} />
            <h4>{item.title}</h4>
          </PlaceItem>
        ))}
      </LikePlace>
    </Container>
  );
};

export default LikePage;

getCafeImage부터 설명하자면 이미지를 따로 파일로 분리해서 만든 함수이다. 인수에 item.id를 넣어준 이유는 함수를 switch문으로 작성했는데 cafeId의 case가 1번일때 1번에 맞는 카페이미지를 보여주세요 ! 이런식으로 작성했기 때문에 이미지가 id에 따라서 화면에 잘 나타나는 것을 확인 할 수 있다.

//Place.jsx

const Place = ({ place, addPlace, setAddPlace }) => {
  const onClickAddPlace = (action) => {
    const addItem = place.filter((placeItem) => placeItem.id === action.id);
    if (addItem) {
      setAddPlace([...addPlace, ...addItem]);
    }
  };
  return (
    //다른 부분의 코드 생략됨
    <LikeBtn
      onClick={() =>
        onClickAddPlace({
          id: item.id,
          title: item.title,
        })
      }
    >
      좋아요
    </LikeBtn>
  );
};

⚠️ 무한렌더링 오류 해결

위에 작성된 코드는 수정된 부분의 코드이다. 아래 작성된 코드를 살펴보면 왜 오류가 났는 지 확인 할 수 있다.

<오류 부분>

// 잘못된 예시
onClick={
  onClickAddPlace({
    id: item.id,
    title: item.title,
})

// 정상작동 예시
onClick={ () => 
  onClickAddPlace({
    id: item.id,
    title: item.title,
})  

• onClick안에 작성했을 때 실수했던 부분이 () => 이 코드를 적지 않아서 였다. 이 코드를 onClick안에 적게되면 클릭했을 때만 내가 인수안에 적었던 부분들이 함수 조건에 맞게 작동하는 것을 말한다. 함수에 인수를 넣어야 되는 상황이라면 () => 꼭 적어주고 그렇지 않다면 함수명만 적어줘야 한다 !!!!!!

• () => 적지 않았을 때, 한 마디로 설명하자면 onClickAddPlace() 함수 호출이기 때문에 바로 그 자리에서 실행이 된다. 내가 클릭을 했는 지 안 했는 지는 상관없이 함수가 호출되고, setAddPlace의 값이 계속 바뀌면서 리렌더링 됐기 때문에 무한 렌더링이 됐었던 것이다.

⭐ 요약

함수 호출 방법 때문에 오류가 났었던 것이었다 ...
onClick 이벤트를 사용할 때에는 아래 문법을 사용해야만 정상 렌더링이 된다. 이 두 코드는 똑같이 작동되기 때문에 상황에 맞게 사용하면 된다.

//onClick 문법

onClick={() => 함수명()}
onClick={함수명}

다이닝코드 정상작동