React

[React] 정적인 컴포넌트를 보관할 때

단호박햄톨 2024. 4. 2. 23:59

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에 저장