원래 프로젝트를 하며 이미지 경로를 잡을 때에 외부 링크를 통해 경로를 잡아뒀었는데,
어느날 들어가보니

이렇게 이미지가 다 깨져 보이는 상황에 놓여버렸다.

외부에서 링크를 끌어다 와서 사용하는 방법이 한계가 있다는 것을 느껴 프로젝트에서 자체적으로 이미지를 관리하는 편이 나을 것이라고 판단하여 글을 작성하게 되었다...

1. src로 이미지 삽입하기

이전에는

이렇게 작성해두었으나, 바뀐 방법은

src폴더 -> assets폴더 -> 이미지 파일

이렇게 에셋 폴더를 만들어 그 폴더에서 이미지파일을 import해오는 것!

이렇게 이미지들을 폴더에 넣었으면,

사용하기위해 import를 해준 뒤

이렇게 넣어주고 확인해보자

다시 원래대로 잘 돌아왔다!^ㅡ^

위의 src 경로가 아닌 public 폴더를 이용하여 이미지를 넣는 방법도 있다!
매번 import를 해주는 것이 비효율적이라고 생각하여 시도해보았는데,
어느 쪽이 더 좋다! 하고 생각이 들지는 않았고,
이미지를 많이 사용하게 되는 경우에는 public폴더를 이용하여 이미지를 넣어주는 편이 좋고,
고정적인 이미지(ex_symbol등)를 넣어주는 경우에는 src 경로로 import해주는 편이 나은 것 같다고 생각했다.

2. public으로 이미지 삽입하기

(map함수를 사용하여 돌리고 있었기 때문에 배열을 사용하였다.)

우선 public폴더에 필요한 이미지를 넣어준다.

그 다음에는 절대경로를 가져오기 위하여 process.env.PUBLIC_URL이라는 구문을 작성해야하는데,

저렇게 경로를 잡아주면 이미지가 잘 출력되지만 나의 경우에는 배열을 돌리고 있었기 때문에

img에 이미지 이름을 작성하여 넣어주었다.

확인해보면 이미지가 잘 출력되는 모습을 확인할 수 있다!