처음 프론트엔드를 공부하면서 배운 자바스크립트, 위의 오류를 생각보다 많이 발견했다.
누군가에게는 절대 일어나지 않을 에러이기도 하면서, 누군가에게는 쉬운 에러일 수 있다.

현재는 이 에러를 다시 보면 대충 어디서 에러가 발생하는지 알게 될 정도로 지긋지긋하게 봤지만, 앞으로는 이 에러를 볼 실수를 줄이고자 글을 작성한다.

이 에러가 발생한 부분은

GameDetail.jsx안에 있는 이 코드에서 발생

전체 코드를 보면 data는 RAWG api에서 받아온 데이터다. 페이지가 렌더링될 때 외부 api에서 데이터를 받아오기 시작하는데, 데이터를 불러오기도 전에 화면을 그리려고 할때 발생한다.

해결 방법

• Optional Chaining (?)
  위 코드에 나와 있듯이 data가 undefined인 곳에 ? 를 붙혀 처리 (데이터가 있을때만 처리한다)

• 기본 값을 설정해서 처리

{(data.description || '').split('<br />')[0].replace(/<p>/g, '') || (data.description || '').split('<p />')[0].replace(/<p>/g, '')}

|| 연산자를 사용해서 data가 없을때 공백 처리하여 에러 처리

• 조건문 사용

 {data.description 
        ? (data.description.split('<br />')[0].replace(/<p>/g, '') || data.description.split('<p />')[0].replace(/<p>/g, '')) 
        : ''}

삼항 연산자로 값이 undefined가 아닐 때만 split()메서드 호출 하도록 처리

• 함수로 분리 처리
  위의 조건문을 함수로 처리해 함수를 함수를 호출

• Nullish Coalescing (??)

	{(data.description ?? '').split('<br />')[0].replace(/<p>/g, '') || (data.description ?? '').split('<p />')[0].replace(/<p>/g, '')}

??을 사용하면 null또는 undefined일 경우 기본값을 사용하도록 할 수 있다.

결과

그때마다 방법은 골라서 사용하면 되겠지만 간단하면서도 안전한 방법은 optional chaining과 nullish coalescing 방법인거 같다. 현재 진행중인 프로젝트도 optional chaining을 사용 중이다.