리액트 public vs assets

리액트를 사용할 때 이미지 파일 같은 것들을 public 폴더와 assets 폴더에 넣곤 하는데 이 둘의 차이점이 무엇인지 궁금했다

 

차이점을 알아보자

 

Public

퍼블릭 폴더에 있는 데이터들은 빌드 과정에서 공개적으로 제공된다. 즉 접속하는 유저가 마음대로 접근할 수 있다는 뜻이다.

만약 public/image.jpg 라고 있다면

localhost:5173/image.jpg를 url로 하여 접근할 수 있다는 뜻이다.

그렇기에 코드내에서 사용할 때에도 <img src="image.jpg"></img>처럼 사용할 수 있는 것이다

 

src/assets (정확히 말하면 assets폴더일 필요는 없고 src 폴더안에만 있으면 된다)

공개적으로 제공되지 않기에 유저가 접근할 수 없다

빌드 과정에서 최적화되어 제공하기 직전에 public 폴더에 '삽입'된다.

그렇기에 <img src="./src/assets/image.jpg> 처럼 사용한다.

 

 

언제 무엇을 사용할까?

public: index.html과 같이 리액트 빌드 과정을 거치지 않는 곳에 넣을 이미지 거나, 파비콘과 같은 것을 사용할 때

assets: 컴포넌트 속에서 이미지를 사용할 때

 

물론 무조건 적인것은 없다. 사용하기 편한 대로 사용하자.