umnoni

리액트 스타일링 - 이미지, 웹 폰트 렌더링

#CSS #React

이미지 렌더링

리액트 컴포넌트에서 이미지를 렌더링하는 방식은 HTML과 약간 다릅니다. 리액트에서는 HTML이 아니라 JSX 문법을 사용하기 때문입니다.

리액트 앱에서 이미지를 렌더링 하기 위해서는 public 폴더나, src 폴더에 이미지를 저장한다.

public 폴더

pubilc 폴더에 이미지를 넣어 렌더링하면, 빌드 과정을 거치지 않고 이미지 자체가 앱에 정적 리소스로 포함된다. public 폴더에 이미지가 있는 경우 따로 import를 하지 않아도 경로(절대 경로)만 정확히 적어주면 JSX나 CSS 어디에서든 사용할 수 있다.

public 폴더 이미지를 JSX에서 사용하려면 img 속성의 src에 url을 넣는다.

// App.tsx
export default function App() {
  return (
    <img src='/assets/images/ocean.jpg' alt='ocean' />
    );
}

public 폴더 이미지를 CSS에서 사용하려면 1. style 속성의 background에 url을 넣는다.

// App.tsx
export default function App() {
  return (
    <div style={{background: `url('/assets/images/ocean.jpg') no-repeat center center`}}></div>
    );
}

2. CSS 파일에서 클래스의 background 속성에 url을 넣은뒤, JSX의 className에 클래스 이름을 넣어 사용한다.

// index.css
.bg {
  background: url('/assets/images/ocean.jpg') no-repeat center center;
}

// main.tsx
...
import './index.css'
...

// App.tsx
export default function App() {
  return (
    <div className='bg'></div>
    );
}

src 폴더

src 폴더에 이미지를 넣어 렌더링하면 이미지가 빌드 과정을 거친다(번들링, 트랜스파일).

번들링(bundling): 여러 파일(이미지, CSS, JS 등)을 하나의 최적화된 결과물 파일로 묶는 과정 트랜스파일(transpile): 최신 문법의 코드를 웹 브라우저가 이해할 수 있는 형태로 변환하는 과정

src 폴더에 넣으면 이미지가 압축되고, 최적화 되기 때문에 더 높은 효율성을 위해 보통 public 폴더 보다는 src 폴더에 이미지를 저장해 사용한다.

src 폴더 이미지를 JSX에서 사용하려면 이미지의 경로를 js 모듈을 사용하는 것 처럼 import 한다.

// App.tsx
import ocean from './assets/images/ocean.jpg';

export default function App() {
  return (
    <img src={ocean} alt='ocean' />
    );
}

src 폴더 이미지를 CSS 파일에서 사용하려면 1. style속성의 background 경로에 import한 경로를 넣는다.

// App.tsx
import ocean from './assets/images/ocean.jpg';

export default function App() {
  return (
    <div style={{background: `url(${ocean})`}}></div>
    );
}

2. CSS 파일에서 background 속성에 상대경로 url을 넣은 뒤, JSX의 className에 클래스 이름을 넣어 사용한다.

// index.css
.bg {
  background: url('../assets/images/ocean.jpg') no-repeat center center;
}

// main.tsx
...
import './index.css'
...

// App.tsx
export default function App() {
  return (
    <div className='bg'></div>
    );
}

외부 CSS 파일을 사용할 때는 반드시 이미지 경로를 상대 경로로 작성해야한다. 그 이유는 빌드 도구가 절대 경로인 리소스는 서버의 정적 리소스라고 생각하고 빌드 과정을 건너뛰어버리기 때문이다. 상대 경로를 사용해야 빌드 도구가 이미지 이름 뒤에 고유 번호(해시값)를 붙여 브라우저 캐시를 최적화할 수 있다.

이미지 렌더링 폴더별 사용처 public 권장: robots.txt, favicon.ico, 혹은 수천 장의 이미지를 DB 데이터와 연동해서 동적으로 불러와야 할 때(이미지 이름이 고정되어야 함) src 권장: 로고, 아이콘, 배경 이미지 등 UI 구성에 필수적인 요소

웹 폰트 렌더링

웹 폰트(web font)는 웹 서버를 통해 다운로드되어 웹 브라우저에 표시되는 폰트를 의미합니다.

구글 폰트 적용 방법

  1. 구글 폰트 사이트(https://fonts.google.com) 접속
  2. 폰트 검색
  3. Get font 버튼 클릭
  4. Get embed code 버튼 클릭
  1. Embed code in the <head> of your html 코드 복사 후 index.html의 head 태그 안에 추가
  2. CSS class 코드 복사 후 src/index.css 파일에 복붙
  3. main.tsx 파일에서 index.css 파일 import
  4. JSX 요소에서 index.css에 복붙한 클래스 이름 className으로 사용

@import 사용 방법

  1. Embed code in the <head> of your html에서 <style> 태그를 제외한 코드 복사
  2. 1번에서 복사한 코드 및 CSS class 코드를 src/index.css 파일에 복붙
  3. main.tsx 파일에서 index.css 파일 import
  4. JSX 요소에서 index.css에 복붙한 클래스 이름 className으로 사용

@font-face 폰트 적용 방법

  1. 눈누 사이트(https://noonnu.cc) 접속
  2. 폰트 검색
  3. 웹폰트로 사용 코드 복사 후 src/index.css 파일에 복붙
  4. index.css 파일에 CSS 클래스 추가(별도로 font-family 지정 필요)
@font-face {
    font-family: 'SfHambakneun';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2106@1.1/SF_HambakSnow.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

.SfHambakneun {
	font-family: 'SfHambakneun', sans-serif;
}
  1. JSX 요소에서 index.css에 추가한 클래스 이름 className으로 사용