📷 리액트에서 이미지 삽입하기

리액트 같은 라이브러리는 외부에서 간단한 것 하나라도 받아오기 위해서는

공정 과정이 필요한데, 개린이인 나는 아직 이런걸로 삽질을 한다 (주륵..)

유튜브 클론코딩을 혼자 야심차게 해보겠다고 팔 걷어부쳤는데

간단한 로고 이미지 하나 삽입하는데 2일 걸렸다니 (나같은 흑우 또있나.. 손?)

그냥 경로 때려 박으면 되는거 아니야?

응 아니야..

저 조각난 문서를 보기싫어서 얼마나 애를 썼는지

구글링 해보고, 코딩 카페도 찾아보고, 슬랙도 다 뒤졌건만

마지막으로 공식문서 한번 뒤져보자 한 것이 해결책을 주었다

(공식 문서를 가장 먼저 봐야했는데... 엎드려)

아주 친절하게 코드 예시까지 나와있음 ^^!

How to use

추가적으로 찾아보니 보통 이미지 삽입 방법이 2가지가 있는데

public 폴더와 src 폴더로 그 방법이 나뉜다.


1. src 폴더에 저장한 이미지 사용하기

src 폴더에 이미지를 자체적으로 저장한다면 import 하여 지정한 값을 src 속성에 넣어준다.

import 할 때의 이름은 class명처럼 원하는대로 지정해줄 수 있고

src 속성 값으로는 중괄호를 이용하여 작성한 값을 넣어주면 된다.

2. public 폴더에 저장한 이미지 사용하기

public 폴더에 저장한 이미지는 상대경로를 이용하여 불러와야 한다.

import 는 따로 필요하지 않다.

<img className="icon-search" src="/search.png" alt="search" />

💡 배운점

처음 이미지가 깨졌을 때는 src 폴더에 이미지가 들어있었고

이미지의 src 속성값을 상대경로로 잡아둔 상태였다.

그 때 이미지가 정상 출력되려면 public 폴더로 이미지 경로를 수정하거나 이미지를 import 했어야 했다.


찾아보니 상황에 따라 public 폴더와 src 폴더로 이미지를 관리하는 법이 다른 걸 알수 있었다.

이 부분에 대해서 다음에 다시 다뤄봐야겠다.

삽질 끝! 😬