[React] 이미지 어디에 저장하는게 좋을까??

React 에서 이미지를 어디에다가 저장하면 좋을까??!? 여태껏 public에 그냥 사용해서 절대경로로 받아와서 사용했지만 이제는 어디에 사용하는게 더 효율적이고 좋을지 알아보고 사용하기로 했다.

public : 앱이 컴파일될 때 사용하지 않는 모든 것

• 앱을 컴파일하는 과저엥서 필요하지 않는 요소들을 넣는다.
• 절대경로 사용가능
• import할 경우 상대경로 쓰지않고 그냥 파일명 가능.
• 경로를 동적으로 참조해야 할 때 public 폴더 사용
• public 폴더에 위치한 정적 파일은 빌드 전에 이미 최적화되어 있기 때문에, 빌드 시간을 단축할 수 있다.
• 이미지가 많거나 프로젝트가 커질수록 유지보수가 어려워진다는 단점

src : 앱이 컴파일될 때 사용 되는 모든 것

• 정적 파일이 빌드 과정에서 처리되어야 할 때. 예를 들어, 이미지 파일의 크기를 줄이거나, 파일 이름을 변경해야 할 때에 해당된다.
• 이미지를 구조화 할 수 있기 때문에 유지보수 및 관리 측면에서 큰 도움이 된다.

이미지 가져오기

<img
	src={`${process.env.PUBLIC_URL}/images/profile_lemon.jpg`}
	alt="프로필 이미지"
/> // public 


<img src={require('../../assets/image.jpg').default} />
// src

src 폴더에서 가져오면??

• 파일이 없으면 사용자에게 404 오류 대신 컴파일 오류가 발생합니다.

public 폴더에서 가져오면??

• 파일이 후처리되거나 경량화되지 않음

• 파일 경로를 잘못 입력하거나 해당파일이 존재하지 않을 경우 컴파일 단계가 아닌 사용자가 접근할 때 404 오류를 응답받음