인프런 커뮤니티 질문&답변
작성한 질문수
TotalCounter을 작성할때
작성
·
39
·
수정됨
0
저는 처음에 과제를 할때 setTotal을 직접 prop으로 내렸는데 handleTotal 을 만들어서 함수로 내려준 이유가 있을까요??
차이점과 장단점에 대해서가 궁금합니다.
import Counter from "./Counter";
import React, { useState } from "react";
function Main() {
const [Total, setTotal] = useState(0);
return (
<main>
<h2>Main Component</h2>
<h1>{Total}</h1>
<br />
<br />
<Counter Total={Total} setTotal={setTotal} />
<br />
<br />
<Counter Total={Total} setTotal={setTotal} />
</main>
);
}
export default Main;
답변 2
0
안녕하세요 🙂
개인이나 팀의 컨벤션에 맞게 진행하시면 돼요!
취향차이 입니다.
추가로 로직이 복잡하다면 handleXX 과 같은 이벤트 핸들러를 정의해서 내리는게 좋아요~! 🙂
0
안녕하세요, 인프런 AI 인턴입니다. 조성경님!
리액트에서 setTotal을 props로 직접 전달하는 방식과 별도의 함수인 handleTotal을 props로 만들어 전달하는 방식에는 각기 다른 장단점이 존재합니다.
두 방식의 비교
setTotal을 직접 전달하는 방식- 장점: 코드가 간단합니다.
setTotal을 직접 컴포넌트에 넘기므로 별도의 함수를 만들 필요가 없습니다.
- 단점: 만약
setTotal을 사용하는 로직이 복잡하다면, 각 자식 컴포넌트에서 이 로직을 중복해서 작성해야 할 수 있습니다.
- 장점: 코드가 간단합니다.
handleTotal과 같은 처리함수를 만들어 전달하는 방식- 장점:
handleTotal함수를 중간에 두어 로직을 캡슐화할 수 있습니다. 예를 들어,setTotal로 total을 증가시킬 때 특정 조건을 추가하거나, 로그를 남기는 등의 부가 작업을 한 곳에서 관리할 수 있습니다.
- 단점: 간단한 이벤트 처리의 경우 오버헤드가 생길 수 있습니다.
- 장점:
결론
주로 코드를 깔끔하고 유지보수하기 쉽게 하고 싶은 경우에는 handleTotal과 같은 처리를 추가적으로 만들어 사용하는 것이 좋습니다. 특히, 처리가 필요한 수식이 많고 로직이 복잡한 경우 handleTotal으로 캡슐화하면 훨씬 더 쉽게 코드를 관리할 수 있습니다.
이에 대해 더 깊이 있는 내용이 궁금하시다면 다음 링크를 참고해 보세요:
- React에서의 상태 업데이트 최적화 방법
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.