[React 에러 일지] Heroku 500 error 해결

OPEN API를 사용해 무비 앱을 제작하는데, 서브 페이지에서 에러가 발생했다. 랜딩 페이지는 제대로 나왔기 때문에 DB나 API 문제는 아니었다.

로컬에서는 잘 되는데 Heroku에 배포 후 모든 페이지에서 API 에러가 발생한다면 혹시 API 키 정보가 담긴 파일이 .gitignore에 포함되어 있는지 확인해보자. Heroku에는 모두 같이 업로드해야 한다.

🚫 500 (internal server error)

internal server error... 뭐 어쩌라는 거지 🤔
구글링 해도 제대로 된 정보가 없었다.

분석

일단, 에러가 난 페이지는 각 영화의 디테일 페이지였다. 전체적인 구조는 이렇다. 랜딩 페이지에서 API로 JSON 데이터를 받고, 그 데이터를 Props로 디테일 페이지에 넘겨주는 형식.

(MovieDetail.js)

return (
  <div className="card">
    <div className="card__inner">
      <a href={`/movie/${props.movieId}`}>
        <img src={props.image} alt={props.movieName} />
      </a>
    </div>
  </div>
)

여러 가지 시도해본 결과 문제점을 찾아냈다. a 태그가 문제였다.

리액트에서 페이지 이동을 하려면 a 태그가 아니라 <Link>를 사용해야 한다.
리액트는 페이지가 변경되는 것처럼 보일 뿐 사실 단일 페이지다. (Single Page Application) 따라서 새로고침 없이 페이지의 업데이트 영역을 재렌더링한다. URL만 변경할 뿐 페이지를 새로고침 하지 않는다.

그런데 a 태그를 사용하게 되면 새로운 URL로 이동하면서 페이지를 자체적으로 새로고침한다. 현재 렌더링 되어 있는 컴포넌트들이 아예 사라지고 다시 렌더링 되는 것이다. 새로고침이 뭐가 문제냐 하면, 우리가 저장해 두었던 state(상태 값)들이 모두 초기화된다.

에러에 대해 정리하자면 이렇다.

랜딩 페이지에서 API로 데이터를 받아 state에 담는다. -> 랜딩 페이지 정상적으로 출력됨 -> a 태그를 통해 디테일 페이지로 이동 -> 새로고침되면서 state가 초기화 됨 -> props에 아무 것도 안 담겨 있음 -> 디테일 페이지 오류

해결

a 태그를 <Link>로 변경하여 쉽게 해결했다.

(MovieDetail.js)

import { Link } from 'react-router-dom';

return (
  <div className="card">
    <div className="card__inner">
      <Link to={`/movie/${props.movieId}`}>
        <img src={props.image} alt={props.movieName} />
      </Link>
    </div>
  </div>
)