[JS] React 에서 jsx단 에러처리하기

프로젝트 진행 중에 jsx 문법 사용시 에러가 나서 페이지 자체가 오류가 나는 경우가 발생. 이렇게 에러가 발생하면 사용자 화면이 멈추거나 흰 화면 혹은 에러 화면으로 대체 되기 때문에 처리가 필요했다.

 

일단 현재 프로젝트에서는 컴포넌트가 세분화 되어 분리되어있지 않아서 세밀한 에러처리가 어려웠다.

(역시 설계할때 부터 컴포넌트 어떻게 나눌지 잘해둬야......)

 

return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.username}</li>
      ))}
    </ul>
  );

발생한 에러는 위와같이 .map()을 사용해 배열을 돌면서 div를 그리는 부분해서 해당 배열이 없는 undefined 인 경우에 발생했다.

 

위의 예시코드처럼 한두줄이면 if 문으로 배열이 없을때 null로 리턴되도록 처리하면 되겠지만 지금 현 프로젝트는 api 로 받아오는 수많은 파라미터들을 map 으로 돌리고 있었어서 하나하나 if로 널 처리하기에 힘들거같다고 판단했다,,

 

오늘 커밋해둔 방법은 return 쪽에 랜더하는걸 함수로 빼서 try catch 로 처리한것이였는데, 아마 리액트에서 더 똑똑하게 처리하는 방법이 있지않을까? 하는 생각이 들어서 이후 게시글로 정리해볼 생각이다.

 

const userDiv = () => {
	try {//try catch로 1차
		return<>{(//조건 연산자로 users가 null이나 undefined 아니면 ul로 리턴되도록
			(users) ? <ul>
				{users.map(user => (
					<li key={user.id}>{user.username}</li>
				))}
			</ul> : null
		)}       	
		</>
    } catch(e) {
    	alert("불러온 유저 리스트가 없습니다. 데이터를 확인해주세요.")
        return null;
    }

}

return(
	<>{ userDiv() }</>
)

 리턴으로 div 태그들을 리턴해주는 함수 userDiv를 만들고 (리액트에서는 최상위 태그가 꼭 있어야 에러가 안나서 빈 <></>를 넣어줌) 1차로 try catch 처리를 해주고, users를 조건 연산으로 확인 후 map 으로 연산하게끔 만들어 주었따.