[React] onClick={() => function()}, onClick={function}의 차이

Issue

기존에 프로젝트 상세 페이지에서만 프로젝트를 삭제할 수 있었던 것을 프로젝트 리스트를 보여주는 페이지에서도 삭제 할 수 있게 하기 위해 onClick={() => handleProject(project.pid)} 다음과 같이 삭제 버튼을 구현하였다.

그 순간! 기존에 있던 프로젝트가 전부 사라졌다 'ㅅ'

Solution

처음에는 백엔드 로컬 서버가 꺼진건가 싶어 장고 서버를 확인해봤는데 아니었다.

마찬가지로 프론트 서버도 잘 살아 있었고, 서버를 닫았다 열어도 내가 생성했던 프로젝트 리스트가 전부 사라져있었다.

무엇이 잘못됐나 싶어 코드를 보며 생각하다 문득 이전 기억이 떠올랐다.

코드를 보며 원인을 이야기해보겠다.

<Button
  _hover={{ bgColor: "blue.100" }}
  bgColor={"blue.50"}
  borderRadius={"xl"}
  onClick={() => handleProject(project.pid)}
>
  View More
</Button>
<Button
  size={"sm"}
  variant="outline"
  borderColor="transparent"
  onClick={handleDelete(project.pid)}
  _hover={{ color: "red.200" }}
>
    프로젝트 삭제하기{" "}
</Button>

코드를 보면 상세 페이지로 이동하는 View More 버튼과 프로젝트를 삭제하는 버튼이 있는 것을 볼 수 있다.

버튼을 클릭했을 때 각각 handleProject와 handleDelete라는 이벤트를 발생시키는 것을 알 수 있는데, 둘의 차이점이 보인다.

이것 때문인 것 같아 둘의 차이점을 찾아보았다.

onClick = {handleDelete(project.pid)} 는 콜백 함수라 불르며 컴포넌트 외부에서 선언된 함수를 콜백으로 전달하여 사용하는 방식이라고 한다.

이는 함수를 즉시 실행하고 그 결과를 onClick 이벤트 핸들러로 전달하기 때문에 컴포넌트가 렌더링 될 때마다 hadleDelete 함수가 실행되어 성능 문제가 발생할 수 있다 한다.

이것 때문이었다. 버튼을 클릭했을 때 이벤트를 일으키는 것이 아니라 컴포넌트가 렌더링 될 때 바로 함수를 실행시켜 버려 프로젝트가 삭제되었던 것이었다.

반면에 onClick={() => handleProject(project.pid)}는 인라인 함수라 부르며 함수를 선언하지 않고 JSX 내부에서 함수를 생성하여 사용하는 방식이라 한다.

이 방식은 버튼을 클릭할 때 새로운 함수를 생성하며, 해당 함수 내에서 handleProject(project.pid) 함수를 실행한다. 이 방법은 함수를 클릭할 때만 실행되므로 성능 문제가 발생하지 않는다고 한다.

따라서, 버튼을 클릭했을 때 원하는 이벤트를 발생시키기 위해서는 onClick={() => handleProject(project.pid) 같은 인라인 방식을 사용해야 정확하게 원하는 의도대로 사용을 할 수 있다.

또, 안전하다고 하니 이렇게 무조건 써야지!

하지만, 이러한 방식도 엄밀히 따지면 성능문제가 없는 것은 아니라 한다.

 

 

이에 대해서는 다음 포스팅에서 다루어 보도록! 🫡