[React] public, src폴더에 따른 이미지 파일 가져오기

• `public` 폴더는 정적 파일을 담는 공간으로, 사용자가 웹페이지 상에서 직접 볼 수 있는 정적인 파일들이 담기는 공간이다. 이 폴더에는 `index.html` 파일이 존재하며, 이는 Virtual DOM(가상돔)이 들어갈 빈 껍데기 HTML 역할을 한다.
• `src` 폴더는 개발하면서 작업하는 파일 대부분을 넣는 디렉토리로, `index.js`, `컴포넌트.js`, `.css` 등의 파일이 존재한다. `src` 폴더 속 `jsx` 파일은 `public` 폴더에 접근할 수 있으며, 이때 절대경로는 `public` 폴더를 기준으로 한다.
• React에서 이미지를 사용할 때는 절대경로와 상대경로를 사용할 수 있으며, 절대경로는 public 폴더를 기준으로 하고, 상대경로는 현재 파일의 위치를 기준으로 한다.
• CSS 파일에서 이미지를 사용할 때는 src 폴더를 기준으로 하기 때문에, public 폴더에 있는 이미지에 접근할 수 없으며, 이를 해결하기 위해 src 폴더 내에 이미지 폴더를 따로 생성하고, require를 통해 이미지에 접근할 수 있다.

북마크
공유하기
신고하기