onChange 어떻게 생각하시나요?

요즘 시대에 이벤트 핸들링에 form을 사용한다고 말씀하시는 분이 있어, 기쁘고 즐겁습니다. 간단한 리퀘스트 보내는 작업에도 form action이라는 간단한 해결책을 두고, axios 설치하고... 핸들러에 주렁주렁 로직 달고..마치 한우 아롱사태로 라면을 끓이는것 같습니다. 이와 별개로, "onChange 때문에 render가 다시 되기에 안쓴다" 라는 이야기는 공감하기 어렵습니다. render를 자주치는 것이 나쁜 것이 아닙니다. 오히려 React, Vue ( 얘는 최근에 좀 논란의 여지가 있지만 여하튼) 등의 SPA 프레임워크의 장점으로 여겨지는 것입니다. 아마도 인터넷 게시글에서 자주 나오는 "무분별한 랜더로 전체 퍼포먼스 하락 / 메모리 누수" 등의 글을 읽으시고 re-render에 대한 부정적인 감정을 가지게 되신게 아닌가 하는 조심스러운 추측을 해봅니다. 저도 그랬거든요 ^^;; 이야기가 좀 많이 새었는데, 각각 일장일단이 있습니다. form을 사용하게 된다면 개별 Input에 대한 상태를 가져가지 않고 submit만 때려도 되지만, 사용자의 입력에 따른 비지니스 로직을 녹여내기 어렵다는 단점이 있습니다. 그렇기에 다루는 form의 Input이 많고, 복잡하다면 상태를 도입하여 onChange 같은 핸들러를 이용하시길 바랍니다

재렌더링이 적으면 당연히 좋겠지만 그거 때문에 onChange를 안 사용한다는 것은 무슨 맥락인지는 모르겠네요,, 일단 form을 통해서 무언가를 하는 것은 기본적으로 submit를 하면 돔 자체가 렌더링 되는 동작하고 onChange는 가상돔을 제 렌더링하는 (함수에 의해서) 효과가 날텐데요. 전체 돔을 다시 렌더링하는게 훨씬 비싼 작업이기 때문에 명확한 자료, 근거가 없다면 form이 무조건 onChange를 대체해야한다는 것은 이해할 수 없을거 같습니다.

간단한 폼은 리액트의 상태로 관리하는 것이 좋겠지만, 하나의 폼 안에 인풋이 많아질수록 그에 따라 폼 전체를 렌더하는 비용이 비싸지기도하고 해당하는 타입 혹은 오브젝트를 관리하는 코드가 많아지는 경험을 했습니다. 그럴때 form의 submit 이벤트에서 preventDefault()하고 이벤트로 FormData 구성한다음 보내면 페이지 이동이나 인풋의 상태관리 없이 submit 시에만 렌더링을 칠수 있게 되죠. 개인적으로는 더 framework agnostic한 방법이라서 좋다고 생각합니다. 다만 이러기 어려운 시나리오는, 인풋값이 다른 인풋값의 제한 값으로 역할하거나 인풋이 어레이로 구성되어 늘거나 줄거나 하면 결국 상태관리를 할 수 밖에 없습니다. 이때는 memo를 통해 최대한 바뀐 부분만 렌더링을 치거나, imperativehandle를 이용하여 form을 submit하는 시점에만 children으로부터 정보를 가져오는 패턴도 사용할 수 있겠지요.

상황에 따라 다른걸로 알고 있습니다. Validation을 예를 들면 input 값을 focus해서 계속 체크해야 될 때는 onChange를 사용하는 것으로 알고 있고 만약 로그인 버튼을 누를 때만 체크하려고 하면 new Form(e.currentTarget)로 처리하는 것으로 알고 있어요 저도 궁금했던 부분이라서 다른 분들 의견이 궁금하네요 ㅎㅎ

' onChange ' 이벤트를 사용하는 것이 재렌더링으로 인한 부정적인 영향을 주지 않을 수 있습니다. 실제로 ' onChange '는 사용자 입력에 실시간으로 반응하고 상태를 업데이트하기 위해 꽤 일반적으로 사용되는 이벤트입니다. 그러나, 이에 대한 우려도 이해할 수 있습니다. 두 가지 방법 모두 장단점이 있습니다. 간단하게 살펴보겠습니다: 1. ' onChange ' 이벤트 사용: - 장점: 입력 상태가 실시간으로 업데이트되어 최신 상태를 유지하며, 사용자에게 실시간 피드백을 제공할 수 있습니다. - 단점: 상태 업데이트가 발생할 때마다 컴포넌트가 재렌더링되어 성능에 영향을 줄 수 있습니다. 그러나 대부분의 경우 이로 인한 성능 저하는 미미합니다. 2. ' form ' 사용: - 장점: 한 번에 모든 입력 값을 가져올 수 있으며, 상태 업데이트와 재렌더링이 줄어들어 성능에 미치는 영향이 적습니다. - 단점: 실시간으로 입력 상태를 추적하거나 사용자에게 피드백을 제공하기 어렵습니다. 또한, 입력 데이터를 수동으로 처리해야 할 수도 있습니다. 결국, 사용 사례에 따라 어떤 방법이 적합한지가 결정됩니다. 성능에 큰 영향을 미치지 않는 한, ' onChange '를 사용하여 실시간으로 상태를 추적하고 피드백을 제공하는 것이 권장되는 경우가 많습니다. 그러나, 성능이 중요한 상황에서는 ' form '을 사용하는 것을 고려해볼 수 있습니다. ----- ✅ Chat GPT의 답변을 평가해 주세요! 틀린 내용은 없는지, 답변이 도움이 되었는지 댓글로 작성해 주세요.