keyEventMap를 전역에 구현하신 이유가 궁금합니다!

Question

const KeyEventMap: Partial['key'], KeyEventHandler>> = { ArrowUp: (e, { size, focusIndex }) => { e.preventDefault() focusIndex(prev => (size + prev - 1) % size) }, ArrowDown: (e, { size, focusIndex }) => { e.preventDefault() focusIndex(prev => (size + prev + 1) % size) }, Enter: (e, { focusedIndex, selectIndex }) => { e.preventDefault() selectIndex(focusedIndex) }, Escape: (e, { toggle }) => { toggle(false) }, } 제 짧은 지식으로는 focusIndex, selectIndex를 파라미터로 받는 것보다 context 내부에서 그냥 사용하는 것이 더 간단할 것 같다고 생각했습니다. keyEventMap을 전역에 구현하여, focusIndex와, selectIndex를 따로 파라미터로 받아서 사용하시는 이유가 있을까요?

jaenam · Answer

AI 인턴의 답변이 너무 훌륭해서 제가 뭐 덧붙일 말이 없네요 😅 저는 AI 인턴만큼 깊게 고려한 것은 아니고, 그저 습관적으로 만들었을 뿐이에요. 실무에서 구현할 내용이 많지 않은 상황에서는 말씀하신 방식으로도 충분히 괜찮다고 생각합니다. 다만 키보드 버튼별 분기가 많다거나 추가요청사항이 있을 것으로 예상되는 상황 등에서 두루두루 유연하게 대응하기에는 제 방식이 더 편리할 것 같고요 😀

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. leejha님, 질문해주셔서 감사합니다. keyEventMap을 전역에 구현하고, focusIndex와 selectIndex를 파라미터로 받아 사용하는 방식은 여러 이점을 가지고 있습니다. 주된 이유는 재사용성과 결합도의 감소입니다. 이 방식을 통해 해당 함수들이 다른 컨텍스트 또는 컴포넌트에서도 유연하게 사용될 수 있게 합니다. 컴포넌트 내부에서 직접 사용하는 대신 이렇게 구현함으로써, 코드의 모듈성과 유지보수성을 향상시킬 수 있습니다. 또한, 테스트 용이성 측면에서도 별도의 파라미터를 통해 독립적인 함수로 관리되기 때문에 더 효율적으로 테스트 코드를 작성할 수 있습니다. 각각의 함수들이 context에 직접 종속되지 않고, 필요한 파라미터를 명시적으로 전달받음으로써, 함수의 예측 가능성과 재사용성이 증가하는 장점이 있습니다. 이는 큰 프로젝트 또는 다양한 상황에서 같은 기능이 필요할 때, 코드의 재사용을 용이하게 하며, 따라서 전체적인 프로젝트의 구조를 더 견고하게 만들어줍니다. 즉, 전역에 구현하고 파라미터를 받아 사용하는 것은 장기적으로 볼 때, 프로젝트의 확장성과 유지 보수성을 위한 결정적인 접근 방식일 수 있습니다.