230905 개발일지 TIL - React에서 이미지 사용(public)

React에서 이미지 사용

1. Public 폴더에 이미지 저장하기
   create-react-app을 사용하여 생성된 프로젝트는 public 폴더가 있다. 이 폴더 안에 있는 파일들은 웹 서버에 의해 직접 제공된다. 따라서, public 폴더 안에 이미지를 넣고 그 URL을 img 태그에서 사용할 수 있다.

<img src="/images/my-image.jpg" alt="My Image" />

위의 코드에서 /images/my-image.jpg 경로는 public/images/my-image.jpg 파일을 가리킨다.

2. CSS에서 배경 이미지로 설정하기
   CSS의 background-image 속성을 사용하여 배경 이미지를 설정할 수 있다. 이 방법은 주로 div 등의 요소에 배경으로 이미지를 적용하고 싶을 때 사용한다.

import './App.css';

function App() {
  return (
    <div className="background">
    </div>
  );
}

export default App;

그리고 App.css 파일에서 다음과 같이 스타일링한다.

.background {
  background-image: url('./images/my-image.jpg');
}

3. CSS-in-JS 라이브러리를 통한 동적 스타일링
   CSS-in-JS 라이브러리 (예: styled-components)는 자바스크립트 내부에서 CSS 스타일링을 할 수 있게 해준다. 이를 통해 props나 state에 따라 동적으로 이미지를 변경하는 것도 가능하다.

import styled from 'styled-components';

const Background = styled.div`
  background-image: url(${props => props.imageUrl});
`;

function App() {
  const [imageUrl, setImageUrl] = useState('./images/my-image.jpg');

  return (
    <Background imageUrl={imageUrl}>
    </Background>
  );
}

export default App;