(16).이정환_react.js강의_감정일기장_프로젝트_3강_폰트,이미지,레이아웃 설정

12.6_font_images.zip

1.26MB

● 1_ Font 사용하기 : 전체 페이지에 font 적용하기

▶순서1_ 위의 파일을 다운 받은 뒤, [public] 폴더에 font 파일을 저장한다.

▶순서2_ 그리고 전체 페이지에 적용해야 하므로, [index.css]에 아래와 같은 스타일 시트 추가하기

-index.css

#font-face{
    font-family : "NanumPenScript"; //니가 적고싶은 명을 자유롭게 적으셈
    src : url(`폰트파일의 상대경로`);
}

body * {//전체 웹페이지에 적용하기
    font-family : "NanumPenScript";
}

● 2_ 이미지 적용하기 : import로 불러와 변수로 사용한다.

▶순서1_ 위의 파일을 다운 받은 뒤, [src] 폴더내의 [assets]에 이미지 파일들을 저장한다.

▶순서2_ 그리고 적용하고 싶은 컴포넌트 코드 파일에 import로 이미지 src들을 불러오기

import emotion from 'emotion1.png'; //파일명, 확장자명까지 제대로 명시해야함

return (<div className="컴포넌트명">
    <img src={emotion1} />//img 태그의 src 속성에 import한 변수값 대입ㅂ
</div>)

○ 출력 결과 :

○ 참고 : React에서 이미지를 호출하여 사용하는 방법은 2가지이다.

▶ 방법1_ [public] 폴더에 이미지파일을 저장해, 태그의 src 속성값에 src를 문자열로 대입

▶ 방법2_ [src/assets]폴더에 이미지파일을 저장해, 사용하고 싶은 컴포넌트 파일에 import를 사용하여, 태그에 src 속성에 변수처럼 대입

◎결론 : React에서는 무조건 방법2로 이미지 사용해라.

▶ 이유 : 방법1은 이미지 파일의 용량만큼 계속 호출, 방법2는 리엑트가 처음 렌더링 시, 캐시메모리에 이미지용량을 저장하고, 호출될떄, 더 빠른 시간으로, 용량 재업로드가 필요가 없이 호출된다.

그럼 왜 2가지가 존재함? => 이미지 파일이 존나 많을 시, 방법1로 , 이미지 파일이 적을 시, 방법2로 한다.

● 3_ 이미지 파일들을 따로 명시하는 util파일에 저장하기

▶순서1_ [src] 폴더 내에 [utils]폴더를 생성 후,[get-emotion-images.js] 파일을 생성한다.

▶순서2_ 이미지들을 모두 import한 뒤,getEmtionImg() 메소드를 작성한다. //case문 이용

-[src/utils/get-emotion-images.js] //이때는 js파일로 생성

import emotion1 from "../assets/emotion1.png";
import emotion2 from "../assets/emotion2.png";
import emotion3 from "../assets/emotion3.png";
import emotion4 from "../assets/emotion4.png";
import emotion5 from "../assets/emotion5.png";

export function getEmotionImg(num) {
  switch (num) {
    case 1:
      return emotion1;
    case 2:
      return emotion2;
    case 3:
      return emotion3;
    case 4:
      return emotion4;
    case 5:
      return emotion5;
    default:
      return null;
  }
}

-[pages/Diary.jsx] :

import { useParams, useSearchParams } from "react-router-dom";
import { getEmotionImg } from "../utils/get-emotion-images";//`[src/utils/get-emotion-images.js]`의 getEmotionImg 메소드 import


function Diary() {
  const { id } = useParams();
  const [params, setParams] = useSearchParams();

  return (
    <div className="Home">
      Diary {id} {params.get("value")}
      <div className="Emotion-img">
      //아래와 같이 src를 불러온다.
        <img src={getEmotionImg(1)} />
        <img src={getEmotionImg(2)} />
        <img src={getEmotionImg(3)} />
        <img src={getEmotionImg(4)} />
        <img src={getEmotionImg(5)} />
      </div>
    </div>
  );
}

export default Diary;

○ 출력 결과 :

● 4_ 레이아웃 설정 :

- index.css :

html,
body {
  margin: 0px;
  width: 100%;
  background-color: rgb(246, 246, 246);

}

#root {
  background-color: white;
  max-width: 600px;
  width: 100%;
  height: 100vh;
  margin: 0 auto;

  box-shadow: rgb(100, 100, 100, 0.2) 0px 0px 29px 0px;
}