[React] Eslint 오류 해결하기 (no-else-return, jsx-a11y)

1. error Unnecessary 'else' after 'return' no-else-return

{combinedMenus.map((menu) => {
    if (menu.type === 'page') {
      const pageMenu = menu as MenuType;
      // 페이지 메뉴일 경우 Menu 컴포넌트로 출력
      return <Menu key={menu.name} menus={[pageMenu]} />;
    } else if (menu.type === 'modal') {
      // 모달 메뉴일 경우 ModalMenu 컴포넌트로 출력
      const modalMenu = menu as ModalMenuType;
      return <ModalMenu key={modalMenu.name} modalMenus={[modalMenu]} />;
    } else {
      return null;
    }
 })}

 

위처럼 작성되어 있던 기존 코드를 if-else 문을 제거하고 모두 if문으로 쪼개주면 해결된다.

{combinedMenus.map((menu) => {
   if (menu.type === 'page') {
          const pageMenu = menu as MenuType;
          // 페이지 메뉴일 경우 Menu 컴포넌트로 출력
          return <Menu key={menu.name} menus={[pageMenu]} />;
		}
		if (menu.type === 'modal') {
		  // 모달 메뉴일 경우 ModalMenu 컴포넌트로 출력
		  const modalMenu = menu as ModalMenuType;
		  return <ModalMenu key={modalMenu.name} modalMenus={[modalMenu]} />;
		}
		return null;
 })}

 

2. error Visible, non-interactive elements with click handlers must have at least one keyboard listener jsx-a11y/click-events-have-key-events

 

만날때마다 당황스러운 접근성 관련 린트에러,, 🥲
비대화형 요소인 div에 클릭 이벤트를 넣어주었기 때문에 발생한 에러였다.
"클릭 핸들러를 가지고 표시되는 비대화형 요소에는 최소한 하나의 키보드 리스너 jsx-a11y/click-events-have-key-events가 있어야 한다" 가 에러 내용이다.

수정 방법은 여러가지가 있는데

<div  onClick = {( ) => { }}  onKeyUp = { handleKeyUp }/> // 방법1
<div  onClick = {( )  => { }}  onKeyPress = { handleKeyPress }/> // 방법2
<button  onClick = {( ) => { }}/> // 방법3
<div  onClick {( ) => { }}  aria-hidden = "true"/> // 방법4

 

이 중 나는 의미 없는 keyEvent로직을 넣고싶지 않았고,

button으로써의 역할을 가지는 div가 아니었기 때문에 방법4 방식을 사용해서 해결해주었다!