인프런 커뮤니티 질문&답변
작성한 질문수
Onclick에 화살표 함수가 아닌 함수를 만들어서 작성하는 이유에 대해서 궁금합니다.
해결된 질문
작성
·
175
·
수정됨
1
안녕하세요. 강의 잘 듣고 있습니다.
강의를 듣다가 의문이 생겨 질문드립니다.
아래 두 코드는 모두 정상적으로 작동합니다.
그럼에도 불구하고, 두 번째 코드를 사용하는 이유는 혹시 나중에 onDelete 기능에 새로운 로직이 추가될 가능성에 대비하기 위해서인가요? 만약 이 기능이 Props로 전달받은 기능만을 사용한다면, 첫 번째 코드로 작성해도 괜찮은지 궁금하여 질문드립니다.
<button onClick={() => {onDelete(id)} }>삭제</button>const onClickDeleteButton = () => {
onDelete(id);
}
return (
//생략
<button onClick={onClickDeleteButton}>삭제</button>
);답변 2
1
안녕하세요 이정환입니다.
두번째 방식으로 작성하는 이유는 AI 인턴이 답변해준대로 여러가지가 있겠지만 ..!
대표적으로는 return문 내부를 복잡하게 유지하기 않기 위해서 입니다.
사실 요런 onClickDeleteButton 같은 이벤트 핸들러 함수는 다른 파일에서 재사용 될 일도 없고, 로직도 복잡하지 않기 때문에 이렇게 별도의 함수로 분리할 필요까지는 없어요
그러나! 그렇다고 해도 입문자 분들께 보여드리는 강의 예제 코드에서 너무 복잡한 return문을 작성하시게 하는것은 좋지 않겠다고 생각했어요 또는 언제는 return문 내부에 적었다, 언제는 빼뒀다 하는것도 꽤나 혼란스러우실거라고 생각했죠
그래서 아예 다 분리하자! 라고 마음먹었고 요렇게 예제를 구성하게 되었습니다.
0
안녕하세요, 인프런 AI 인턴입니다. 이찬원님, React에서 이벤트 핸들러를 작성할 때 화살표 함수를 사용하거나 별도의 함수를 만들어 사용하는 것에 대한 질문을 주셨네요.
두 코드는 모두 잘 작동하지만, 두 번째 코드 형태를 사용하는 이유는 여러 가지가 있습니다.
코드 가독성 및 유지보수성: 별도의 함수를 작성하면 코드가 더 명확해지고, 나중에 기능을 확장하거나 수정할 때 편리합니다. 함수 내에 복잡한 로직이 들어갈 경우, 함수로 분리하는 것이 코드 가독성을 높이는 데 도움이 됩니다. 특히, 이벤트 핸들러가 긴 경우나 여러 가지 논리를 포함할 때는 별도로 함수화하는 것이 좋습니다.
리렌더링 최적화: 컴포넌트가 리렌더링 될 때마다 새로운 함수(화살표 함수)는 새로운 참조값을 가지게 됩니다. 이 경우, 불필요한 리렌더링이 발생할 수 있습니다. 따라서 state나 props의 변화에 의해 이벤트 핸들러가 자주 실행될 여지가 있는 경우에는 함수로 분리하여 불필요한 리렌더링을 방지할 수 있습니다.
재사용성: 독립된 함수는 다른 곳에서도 재사용할 수 있습니다. 특정 로직이 반복적으로 사용될 가능성이 있는 경우 함수로 만드는 것이 좋습니다.
따라서, 현재의 코드가 심플하고 로직이 확실히 변경되지 않을 경우 첫 번째 방식도 충분히 사용할 수 있지만, 유지보수와 확장성을 고려한다면 두 번째 형태를 사용하는 것이 좋습니다.
관련된 주제에 대해 이미 이와 비슷한 질문이 올라왔습니다. 자세한 설명과 함께 다른 질문에서의 답변을 참고해 보세요:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
답변 감사합니다. 그럼 각자의 코드 컨벤션에 따라 작성하면 된다고 생각하면 될까요?