[React] 리액트에서 이미지 경로 설정하기 (public, src 디렉토리 차이)

리액트 애플리케이션에서 이미지를 src 디렉토리와 public 디렉토리 중 어디에 넣는지와, 각 디렉토리에 위치할 때 이미지 경로를 설정하는 방법의 차이에 대해 알아봤다.

public 디렉토리 VS. src 디렉토리

📁 public directory
- 정적 파일을 넣는 디렉토리 (index.html을 비롯한 html 파일, img 등)

📁 src directory
- 개발하면서 작업하는 파일 대부분을 넣는 디렉토리 (index.js, 그 외 리액트 컴포넌트 같은 js 파일, css 파일 등)

public 디렉토리에 넣은 파일은 webpack으로 처리되지 않고, 원본이 build 폴더에 복사된다. 그렇기 때문에 다음과 같은 특징을 갖는다.

• 파일이 후처리(post-process) 되거나 경량화(minify)되지 않음
• 파일 경로를 잘못 입력하거나, 해당 파일이 존재하지 않을 경우 컴파일 단계에서 오류가 발생하지 않고, 사용자가 접근할 때 404 오류를 응답받게 됨
• 결과 파일명에 content hash가 포함되지 않기 때문에, 파일이 수정될 때 마다 직접 파일명을 수정하거나 매개변수 쿼리를 추가해야 함

public 디렉토리를 언제 사용하는가

• 특정 이름을 가진 파일이 필요할 때
• 이미지 파일이 수천 개 있어서 경로를 동적으로 참조해야 할 때
• 번들링 된 코드 밖에서 pace.js 같은 작은 스크립트를 포함하고 싶을 때
• webpack과 호환되지 않는 라이브러리를 사용해야 할 때 (<script> 태그로 라이브러리를 포함해야 할 때)

JSX에서 이미지 경로 설정하는 방법

1. public 디렉토리에 있는 이미지 — process.env.PUBLIC_URL

const App = () => {
   return (   
       <img src={process.env.PUBLIC_URL + '/myImagePath.jpg'} /> 
   ); 
};  
export default App;

2. src 디렉토리에 있는 이미지 — import

• webpack을 사용하면 CSS 파일을 import 하는 것 처럼 이미지 파일도 import 해서 사용 가능
• 파일 최상단에 사용하려는 모든 이미지를 import해서 사용하는 동기적인 방법

import myImage from './assets/myImage.jpg';  
const App = () => {  
   return (   
      <img src={myImage} />  
   ); 
};  
export default App;

3. src 디렉토리에 있는 이미지 — require

• Node.js 환경이므로 require로 문서 어디서나 파일을 불러올 수 있음
• default 를 붙이는 이유는 require를 사용하면 객체 형태로 값이 리턴되기 때문에, default 를 붙이면 문자열 형태 그대로 인식되게 만들어줌

const App = () => {  
   return (   
      <img src={require('./assets/myImage.jpg').default} />  
   ); 
};  
export default App; 

참고한 글 👉 링크