TotalCounter을 작성할때

Question

저는 처음에 과제를 할때 setTotal 을 직접 prop 으로 내렸는데 handleTotal 을 만들어서 함수로 내려준 이유가 있을까요?? 차이점과 장단점에 대해서가 궁금합니다. import Counter from "./Counter"; import React, { useState } from "react"; function Main() { const [Total, setTotal] = useState(0); return (

Main Component

{Total}

); } export default Main;

gymcoding · Answer

안녕하세요 🙂 개인이나 팀의 컨벤션에 맞게 진행하시면 돼요! 취향차이 입니다. 추가로 로직이 복잡하다면 handleXX 과 같은 이벤트 핸들러를 정의해서 내리는게 좋아요~! 🙂

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. 조성경님! 리액트에서 setTotal 을 props로 직접 전달하는 방식과 별도의 함수인 handleTotal 을 props로 만들어 전달하는 방식에는 각기 다른 장단점이 존재합니다. 두 방식의 비교 setTotal 을 직접 전달하는 방식 장점 : 코드가 간단합니다. setTotal 을 직접 컴포넌트에 넘기므로 별도의 함수를 만들 필요가 없습니다. 단점 : 만약 setTotal 을 사용하는 로직이 복잡하다면, 각 자식 컴포넌트에서 이 로직을 중복해서 작성해야 할 수 있습니다. handleTotal 과 같은 처리함수를 만들어 전달하는 방식 장점 : handleTotal 함수를 중간에 두어 로직을 캡슐화할 수 있습니다. 예를 들어, setTotal 로 total을 증가시킬 때 특정 조건을 추가하거나, 로그를 남기는 등의 부가 작업을 한 곳에서 관리할 수 있습니다. 단점 : 간단한 이벤트 처리의 경우 오버헤드가 생길 수 있습니다. 결론 주로 코드를 깔끔하고 유지보수하기 쉽게 하고 싶은 경우에는 handleTotal 과 같은 처리를 추가적으로 만들어 사용하는 것이 좋습니다. 특히, 처리가 필요한 수식이 많고 로직이 복잡한 경우 handleTotal 으로 캡슐화하면 훨씬 더 쉽게 코드를 관리할 수 있습니다. 이에 대해 더 깊이 있는 내용이 궁금하시다면 다음 링크를 참고해 보세요: - React에서의 상태 업데이트 최적화 방법 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.