[React] 리액트 JSX에서 이미지가 엑박으로 나올 때

 

문제점

 

리액트에서 이미지를 표시하기 위해 아래와 같이 코딩하면 이미지가 로드되지 않고 엑박으로 나온다.

 

<img src='./images/icon.png' />

 

구글링한 결과 require()를 사용하면 해결된다 한다.

 

하지만 아래와 같은 경우에도 엑박으로 나왔다.

 

<img src={require("./images/icon.png")}/>

 

2021.04.09

 

해당 문제도 해결했다.

 

require() 함수에 default를 붙이니 해결됐다.

 

<img src={require("./images/icon.png").default}/>

 

require만 붙이면 이미지가 아닌 객체가 return되기 때문이었다.

 

default를 붙이면서 이미지 자체를 불러올 수 있다.

 

 

오류 수정 참고한 페이지)

stackoverflow.com/questions/62244118/require-local-image-in-react

Require local image in React

 

이는 핫 모듈 로딩을 제공하는 웹팩의 성질 때문에 그렇다고 한다.

 

이유 참고한 페이지)

stackoverflow.com/questions/43247696/javascript-require-vs-require-default

 

import가 해결되었던 이유는 import 내부에 해당 default 모듈이 이미 존재하기 때문이다.

 

결론 : import 쓰자

 

해결책

 

아래와 같이 하면 경로 문제를 리액트가 알아서 처리해준다. 해결되었다.

 

import icon from './images/icon.png'

.. (중략)

<img src={icon}/>

 

 

배운점

 

create-react-app처럼 웹팩을 사용하는 경우에는 이미지 디렉토리와 링크하기 위해 require()혹은 import를 사용해야함.

 

 

 

웹팩이란?

 

웹팩은 모듈 번들러 라이브러리 중 하나이다.

 

모듈 번들러란 여러개의 나누어져 있는 파일들을 하나의 파일로 만들어주는 라이브러리를 말한다.

 

모듈 번들러 라이브러리는 웹팩(wepback), Parcel 등 있다.

 

모듈 번들러는 여러개의 자바스크립트 파일을 하나의 파일로 묶어서 한 번에 요청을 통해 가지고 올 수 있게 하고 최신

 

자바스크립트 문법을 브라우저에서 사용할 수 있게 해준다. 또한 자바스크립트 코드들을 압축하고 최적화 할 수 있기 때

 

문에 로딩 속도를 높일 수 있다.

 

옛날 모듈 번들러 개념이 없었다고 가정하고 웹페이지에 접속했다고 가정하자.

 

이때 웹페이지에서는 페이지를 보여주기 위한 수 많은 자바스크립트 파일을 서버에 요청한다.

 

이를 통해 웹페이지를 보여주기 위해 서버와 여러번 통신하게 되는게 비효율적이다 라고 볼 수 있다.

 

또한 옛날 자바스크립트는 모듈 개념이 없었기 때문에 파일이 나누어져 있어도 변수 스코프를 생각하면서 개발을 해야

 

했다.

 

이런 문제를 해결하기위해 최신 자바스크립트부터는 모듈 개념이 생겼다. 하지만 지원을 안해주는 브라우저들도 있기

 

때문에 무언가 브라우저들이 지원할 수 있는 코드로 변환해주는 작업이 필요하다.

 

물론, 수 많은 자바스크립트 파일이 하나의 파일로 묶인다면 초기 로딩 속도가 어마어마해 질 수 있다.

 

모듈 번들러들은 이런 문제를 해결하기 위해 청크, 캐시, 코드 스플릿 개념들을 도입하면서 문제들을 해결하고 있다.

 

 

 

 

require()와 import 사용 시 차이점

 

import로 모듈을 불러오는 경우 사용하지 않는 코드들은 웹팩의 tree shaking에 인해 빌드 시 제거된다. 결과적으로 코드

 

량이 줄어들고 성능적으로 우수해진다. 반면 require()를 사용하는 경우, 모듈을 동적으로 불러올 수는 있지만 불필요한

 

코드들까지 불러오게 된다.

 

따라서 import 모듈 사용이 권장된다.