728x90
React에서 img 사용하는 법!
- 일반적으로 html에서 img를 사용 할 때는 처럼 사용하지만 해당 방법을 사용하면 오류가 뜨지는 않지만 image가 정상적으로 출력되지 않습니다.
React에서는 image를 사용할 때 조금 다른방식으로 사용합니다.
import Img from '이미지경로';
const App = () => {
return(
<>
<img src={Img} alt=""/>
<>
);
};
export default App;
- React에서는 위의 코드와 같이 사용됩니다. 또한 추가로 alt값을 공백으로라도 둬야합니다. 만약 img 엘리먼트에 alt값을 추가하지 않았다고
오류를 출력하면서 프로젝트 구동이 안되는건 아니지만 console에서는 경고성 메시지를 뿜어냅니다.
그렇다면 React에는 위의 방법말고는 image를 사용 할 수 있는 방법이 없는 것은 아닙니다. 퍼블리셔에게 익숙한 방법 중 하나인 가상선택자로 이미지 넣기 등
css를 활용하여 background 로 image를 넣는 것은 언제나 가능합니다.
이 때 혼자서 React를 독학할 때 한가지 의문점이 들었는데 React가 각각의 컴포넌트들을 분리해서 필요한 화면에서 해당 컴포넌트만 불러올 수 있는데
image같은 경우도 한 컴포넌트에 다 몰어넣어서 필요한 image들만 쏙쏙 빼서 사용할 수 있지 않을까…? 라고 생각하고 바로 실행에 옮겼습니다.
혼자서 삽질은 너무 힘들다
- 그렇게 바로 실행에 옮겼을 때 솔직히 JavaScript에 대한 개념도 완전하게 이해하지 못하고 맨땅에 헤딩하던 상황이라 실패했습니다.
정말 무참히 실패했습니다… 그래서 포트폴리오를 만들 때 어디 도움받을 곳도 딱히 없고… 그냥 한 컴포넌트에서 필요한 이미지들을 다 import 시켰습니다.
import Img1 from './img1';
import Img1_m from './img1_mo';
import Img2 from './img2';
import Img2_m from './img2_mo';
import Img3 from './img3';
import Img3_m from './img3_mo';
import Img4 from './img4';
import Img4_m from './img4_mo';
(...)
import Img12 from './img12';
import Img12_m from './img12_mo';
const App = () => {
return (
<>
<img src={Img1} alt=""/>
(...)
<img src={Img12_mo} alt=""/>
<>
)
}
export default App;
- 대충 위의 코드들처럼 필요한 image들을 전부 import 시켜줬습니다. 물론 위의 방법이 나중에 문제가 되거나 하지는 않습니다.
그저 개인적으로 뭔가 맘에들지않고 의미없는 코드가 많아보이는 느낌을 줄 뿐이었습니다. 그 후 열심히 구글링을 진행 한 결과 방법을 찾게됬습니다.
방법은 의외로 간단했으며 추후에 React에 좀 더 익숙해지면 다양하게 활용을 할 수 있을 듯 했습니다.
- 먼저 image들을 불러올 전용 컴포넌트를 만들어 줍니다. 전 Img.js라고 정하겠습니다.
import Img1 from './img1';
import Img1_m from './img1_mo';
import Img2 from './img2';
import Img2_m from './img2_mo';
import Img3 from './img3';
import Img3_m from './img3_mo';
const Images = {
Img1,
Img1_mo,
Img2,
Img2_mo,
Img3,
Img3_mo,
}
export default Images;
- 일단은 필요한 Image들을 다 import 시켜줍니다. 그 후 해당 이미지들을 하나의 Images 라는 변수에 넣어줍니다. 그러면 1차 작업이 끝납니다.
그 다음으로 image가 필요한 컴포넌트에가 방금 만든 img.js 컴포넌트를 import 시켜줍니다.
// App.js
import Images from './img';
const App = () => {
return (
<>
<img src={Images.Img1} alt=""/>
<>
)
}
export default App;
// Main.js
import Images from './img';
const Main = () => {
return (
<>
<img src={Images.Img3} alt=""/>
<>
)
}
export default Main;
- 사용법은 위의 코드처럼 사용하면 됩니다. 사실 해당방법이 실제 성능면에서 무리가 가는지 안가는지는 아직 모르겠습니다… 1차원적으로 코드가 깔끔해보이는 것
그거 한가지때문에 image가 많을 경우 사용합니다.
잘못된 점 지적하며 공격, 더 좋은방법과 같은 댓글은 언제나 감사합니다.
