header나 footer와 같은 정적인 컴포넌트를 보관할 때에는 굳이 component로 보관하지 않아도됨
index.html
<body>
<header>
<img src="test-logo.png"/>
</header>
<div id="root"></div>
<script type="module" src="/src/index.jsx"></script>
</body>
위와같이 header를 컴포넌트로 만들지 않고 index.html에 직접 만들어도 된다는 소리다.
img src 를 참조할 때, public 폴더 내에 png파일을 넣으면 png파일 이름만 src에 삽입하면 된다 (index.html, index.css에서 직접 참조 가능)
경로 public : public/에 저장된 이미지는 프로젝트 개발 서버 및 빌드 프로세스에 의해 공개적으로 제공되기 떄문이다. 이 파일들은 브라우저 내에서도 직접방문 가능 ex) localhost:8080/test-logo.png
=> 빌드 프로세스에 의해 처리되지 않는이미지 ex ) 파비콘 대체적으로 사용 가능
경로 src/assets : src/assets 와 같은 하위 폴더에 저장된 모든 파일은 공개적 제공이 아니므로 웹사이트 방문자가 접근할 수 없다. 대신 코드 파일에서 사용가능하다. 코드 파일에 가져온 이미지는 빌드 프로세스에 의해 인식되어 최적화 되며, 웹사이트에 제공하기 직전에 public 폴더에 삽입된다. 가져온 이미지는 참조한 위치에서 자동으로 링크가 생성되어 사용된다.
=> 컴포넌트 내에서 사용되는 이미지는 src/assets에 저장
'React' 카테고리의 다른 글
| [React] Refs, Portals (0) | 2024.04.04 |
|---|---|
| [React] React Developer Tools (0) | 2024.04.03 |
| [React] proxy props 사용하기 (0) | 2024.04.02 |
| [React] key prop의 중요성 (1) | 2024.03.29 |
| [React] useState() (1) | 2024.03.29 |
