이미지준비하기

📗 이미지는 <한입크기로잘라먹는리액트> 참고

이미지 준비하기

감정일기장이미지 => 책에서 제공해주는 이미지를 사용!

emotion.zip 다운로드 - 압축풀기
압축을 풀면 5개의 png 파일이 있다.

📁 src/img 폴더 생성하기
5개의 이미지를 📁 src/img 폴더로 옮기기

=> 저장한 이미지는 import 문으로 불러와서 <img> 태그와 함께 사용할 예정이다.

이미지를 불러오는 함수 만들기

: 컴포넌트에서 이미지를 일일이 불러오는 방식은 불편하다. 이미지 번호에 맞게 적절한 이미지를 반환하는 함수를 만드는게 필요하다.
: 이미지 반환 함수는 별도의 파일에서 만들어야한다.

📁 src/util.js 생성
: 감정 이미지를 반환하는 함수만들기

import emotion1 from './img/emotion1.png';
import emotion2 from './img/emotion2.png';
import emotion3 from './img/emotion3.png';
import emotion4 from './img/emotion4.png';
import emotion5 from './img/emotion5.png';

export const getEmotionImgById = (emotionId) => {  // 함수 getEmotionImgId의 매개변수 emotionId에는 페이지나 컴포넌트에 전달된 감정 이미지 번호가 저장
  const targetEmotionId = String(emotionId); // emotionId가 문자열이 아닌 숫자로 제공될 수도 있기 때문에 String메서드를 이용해 명시적으로 형변환
  switch (targetEmotionId) {  // switch문으로 번호와 일치하는 이미지를 찾아서 반환
    case "1":
      return emotion1;
    case "2":
      return emotion2;
    case "3":
      return emotion3;
    case "4":
      return emotion4;
    case "5":
      return emotion5;
    default:
      return null;
  }
};

📁 src/App.js
: App 컴포넌트에서 함수 getEmotionImgById를 호출해서 모든 감정 이미지를 페이지에 렌더링한다.

import { getEmotionImgById } from './util';

function App() {
  return (
    <div className="App">
    	<img alt="감정1" src={getEmotionImgById(1)} />
    	<img alt="감정2" src={getEmotionImgById(2)} />
    	<img alt="감정3" src={getEmotionImgById(3)} />
    	<img alt="감정4" src={getEmotionImgById(4)} />
    	<img alt="감정5" src={getEmotionImgById(5)} />
	</div>
  );
}
export default App;

import를 이용하여 함수 getEmotionImgById를 util.js에서 불러온다.
<img> 태그의 src속성에 함수 getEmotionImgById를 설정하고, 인수로 감정 이미지 번호를 전달한다.