React - 이미지 태그 추가

TIL - React

React에서 이미지 태그를 넣는 방법

React에서 이미지 태그를 추가할 경우, scr 속성에 HTML에서 사용하듯 파일 경로를 넣으면 작동하지 않는다.

그렇다면 리액트에서는 이미지를 어떻게 넣을 수 있을까?

어스 프로젝트를 리액트로 진행하면서 이에 관련해서 알게 된 부분, 고민을 해결한 부분을 정리해보려고 한다.

 

 

방법 1. 

이미지를 import 한 후, 해당 변수를 img 태그 src에 넣어준다.

선언한 변수를 JSX에서 {}로 감싸서 사용한다.

import cover from "이미지 경로/cover.jpg";
...
<img src={cover} />;
...

 

어스마켓 프로젝트 - Navigation 컴포넌트

Navigation 컴포넌트 내에 아이콘 이미지를 import로 불러오면서 코드가 지저분해졌다.

( action 속성에 들어가는 아이콘 이미지도 있어서 더 길어짐)

 

이렇게 일일이 import로 불러와야 하는 이미지가 많은 경우

가독성도 안좋고 비효율적이라는 생각이 들었다.

이런 문제를 개선하기 위한 방법을 찾아보았다.

 

방법 2.

이미지 파일 경로를 바꾼다.

public 폴더 > img 폴더 생성 후 이미지 파일 넣기

<img src="img/cover.jpg" />;

 

👍이미지를 import하지 않고 바로 img 파일을 적용할 수 있음

 

 

 

참고사이트

리액트 이미지 넣는 방법 (이미지 경로)

Create-react-app 프로젝트에서 이미지 경로를 설정하는 4가지 방법