React.js의 이미지 경로에 대한 올바른 접근 방식

React.js 프로젝트에서 이미지의 올바른 경로를 결정하는 것은 일반적인 과제였습니다. 전통적으로 프로젝트의 파일 구조에 따라 src 속성 내에서 상대 경로가 사용되었습니다. 그러나 create-react-app으로 빌드된 React.js 프로젝트에서는 이 접근 방식이 항상 작동하지 않을 수 있습니다.

이는 경로가 "/details/2일 때 이미지가 올바르게 표시되는 제공된 예에서 분명합니다. "이지만 "/details/2/id"인 경우에는 그렇지 않습니다. 이러한 불일치는 파일 아키텍처가 아닌 URL 구조를 기반으로 상대 경로를 해석하기 때문에 발생합니다.

이 문제를 해결하려면 React.js 프로젝트에서 이미지 경로를 정의하는 대체 방법을 권장합니다. src 속성에 상대 경로를 사용하는 대신 import 문을 사용하여 이미지를 가져올 수 있습니다. 예:

import logo from './logo.png';

class Nav extends Component {
  render() {
    return ();
  }
}

이 접근 방식에서 import 문은 이미지 파일에 대한 상대 경로를 지정하고 이미지는 변수로 저장됩니다. 구성 요소를 렌더링할 때 이 변수는 이미지의 소스로 사용됩니다.

이 방법을 사용하면 가져오기 프로세스 중에 상대 경로가 설정되므로 React-router가 처리하는 여러 경로에서 이미지 경로가 일관되게 유지됩니다. 현재 URL 구조를 기반으로 하지 않습니다. 결과적으로, 액세스되는 특정 경로에 관계없이 모든 이미지가 올바르게 표시됩니다.