Onclick에 화살표 함수가 아닌 함수를 만들어서 작성하는 이유에 대해서 궁금합니다.
안녕하세요. 강의 잘 듣고 있습니다.
강의를 듣다가 의문이 생겨 질문드립니다.
아래 두 코드는 모두 정상적으로 작동합니다.
그럼에도 불구하고, 두 번째 코드를 사용하는 이유는 혹시 나중에 onDelete 기능에 새로운 로직이 추가될 가능성에 대비하기 위해서인가요? 만약 이 기능이 Props로 전달받은 기능만을 사용한다면, 첫 번째 코드로 작성해도 괜찮은지 궁금하여 질문드립니다.
<button onClick={() => {onDelete(id)} }>삭제</button>const onClickDeleteButton = () => {
onDelete(id);
}
return (
//생략
<button onClick={onClickDeleteButton}>삭제</button>
);답변 2
2
안녕하세요 이정환입니다.
두번째 방식으로 작성하는 이유는 AI 인턴이 답변해준대로 여러가지가 있겠지만 ..!
대표적으로는 return문 내부를 복잡하게 유지하기 않기 위해서 입니다.
사실 요런 onClickDeleteButton 같은 이벤트 핸들러 함수는 다른 파일에서 재사용 될 일도 없고, 로직도 복잡하지 않기 때문에 이렇게 별도의 함수로 분리할 필요까지는 없어요
그러나! 그렇다고 해도 입문자 분들께 보여드리는 강의 예제 코드에서 너무 복잡한 return문을 작성하시게 하는것은 좋지 않겠다고 생각했어요 또는 언제는 return문 내부에 적었다, 언제는 빼뒀다 하는것도 꽤나 혼란스러우실거라고 생각했죠
그래서 아예 다 분리하자! 라고 마음먹었고 요렇게 예제를 구성하게 되었습니다.
0
안녕하세요, 인프런 AI 인턴입니다. 이찬원님, React에서 이벤트 핸들러를 작성할 때 화살표 함수를 사용하거나 별도의 함수를 만들어 사용하는 것에 대한 질문을 주셨네요.
두 코드는 모두 잘 작동하지만, 두 번째 코드 형태를 사용하는 이유는 여러 가지가 있습니다.
코드 가독성 및 유지보수성: 별도의 함수를 작성하면 코드가 더 명확해지고, 나중에 기능을 확장하거나 수정할 때 편리합니다. 함수 내에 복잡한 로직이 들어갈 경우, 함수로 분리하는 것이 코드 가독성을 높이는 데 도움이 됩니다. 특히, 이벤트 핸들러가 긴 경우나 여러 가지 논리를 포함할 때는 별도로 함수화하는 것이 좋습니다.
리렌더링 최적화: 컴포넌트가 리렌더링 될 때마다 새로운 함수(화살표 함수)는 새로운 참조값을 가지게 됩니다. 이 경우, 불필요한 리렌더링이 발생할 수 있습니다. 따라서 state나 props의 변화에 의해 이벤트 핸들러가 자주 실행될 여지가 있는 경우에는 함수로 분리하여 불필요한 리렌더링을 방지할 수 있습니다.
재사용성: 독립된 함수는 다른 곳에서도 재사용할 수 있습니다. 특정 로직이 반복적으로 사용될 가능성이 있는 경우 함수로 만드는 것이 좋습니다.
따라서, 현재의 코드가 심플하고 로직이 확실히 변경되지 않을 경우 첫 번째 방식도 충분히 사용할 수 있지만, 유지보수와 확장성을 고려한다면 두 번째 형태를 사용하는 것이 좋습니다.
관련된 주제에 대해 이미 이와 비슷한 질문이 올라왔습니다. 자세한 설명과 함께 다른 질문에서의 답변을 참고해 보세요:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
useEffect와 lifecycle문의
0
26
2
프론트엔드 학습 수준 문의
0
37
2
리액트 챕터별 코드에서 eslint 설정파일이 없어요
0
47
2
데이터 로딩중 화면만 계속 나와요!!
0
53
2
퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요
0
79
2
이후의 커리큘럼 문의
0
102
2
실슬환경 설정에서 save후 console.log 부분이 새로고침이 안되는현상입니다.
0
50
2
최적화 관련 질문있습니다 (useMemo 등)
0
84
3
프로바이더 컴포넌트의 위치는 어떤 기준인가요?
1
81
3
Date 객체에 관련하여 질문드립니다.
0
84
2
리액트 개정판 교재 질문
0
60
2
예제코드가 안나와요!
0
78
2
select a variant 선택에서 javascript와 javascript+react compiler 중 무엇을 선택해야하나요? com
0
108
2
onMouseEnter 관련 문의 드립니다
0
91
3
배열의 렌더링 관련 질문 드립니다.
0
72
2
2:40초 refObj를 콘솔로 출력시 오류가 발생합니다.
0
112
2
TS, 리액트 강의중에 뭘 먼저 수강하는게 좋을까요?
0
134
2
useCallback 적용한 onCreate, onUpdate, onDelete 함수..
0
69
1
vs code 자동완성관련 문의
0
111
2
91강 useEffect내에서 상태변화함수 호출시 발생하는 에러
1
178
2
87강 필터 함수 질문
0
68
2
useRef, useState count 비교
0
67
2
안된다고했던 이유가 무엇이었는지 모르겠습니다
0
90
2
85강에서 객체를 왜 클래스로 만들어서 new 하지 않는건지 궁금합니다.
0
75
2