리액트 공부3. 부트스트랩, 이미지넣기,

이번엔 새로운 프로젝트를 만들어서 해보겠다

부트스트랩 사용하기

리액트도 리액트 부트스트랩이라는것이 있다. 구글에 React-Bootstrap을 설치하면

이 주소를 터미널에 입력하여 부트스트랩 라이브러리를 설치한다.

또한 Bootstrap Css파일을 요구하는 경우가 있기 때문에

이 링크를 index.html의 <head>에 넣어주거나 App.js에 import 'bootstrap/dist/css/bootstrap.min.css'; 이런식으로 추가해도 된다.

만약 무언가 필요한게 있다면 검색창에 검색하여 그 부분을 복사해오면 된다. 만약 상단 바가 필요하다면 navbar라고 검색하여 나오는 코드를 가져오면 된다.

import {Button, Navbar, Container, Nav} from 'react-bootstrap'

function App(){
  return (
    <div>
      <Navbar bg="dark" variant="dark">
        <Container>
        <Navbar.Brand href="#home">Navbar</Navbar.Brand>
        <Nav className="me-auto">
          <Nav.Link href="#home">Home</Nav.Link>
          <Nav.Link href="#features">Features</Nav.Link>
          <Nav.Link href="#pricing">Pricing</Nav.Link>
        </Nav>
        </Container>
      </Navbar>
    </div>
  )
}

또한 대문자로 시작하는 컴포넌트들을 전부 import 해주어야 한다.

이미지 삽입

css로 이미지를 넣고싶다면 ./이미지경로 로 사용하면 된다

.main-bg {
  background-image : url('./bg.png');
}

html 안에서 src 폴더의 이미지를 넣고 싶다면 이미지를 import 해오고 사용해야 된다

import bg from './bg.png'

function App(){
  return (
    <div>
      <div className="main-bg" style={{ backgroundImage : 'url(' + bg + ')' }}></div>
    </div>
  )
}

어디 호스팅되어있는 외부 이미지는 절대경로 그대로 작성하면 된다.

<img src="https://codingapple1.github.io/shop/shoes3.jpg" width="80%" />

여러가지 소스코드는 src폴더에 보관되는데, 이미지같은 static 파일은 public 폴더에 보관해도 된다.

리액트로 개발을 끝내면 build를 할텐데, public 폴더에 있는 것들은 그대로 보존해준다. 이렇게 public 폴더에

이미지를 보존하고있을때 이미지를 사용하려면 그냥 /이미지경로 사용하면 된다.

public 폴더에 이미지가 있다면 따로 import를 안해줘도 된다는 장점이 있다.

<img src="/logo192.png" />

하지만 이 방법을 사용하면 url주소가 바뀌면 이미지를 사용하지 못하기때문에 아래와 같은 방법이 권장된다.

<img src={process.env.PUBLIC_URL + '/logo192.png'} />

import export

만약 방대한양의 object자료를 가져와야 할 때 같은 파일안에서 한번에 처리하면 코드가 너무 길어지고 가독성도

떨어진다. 다른js파일을 만들어 거기에 object자료를 저장하고 거기서 export를 한 후 app.js에서 import해와서 사용하면 가독성을 높일 수 있다.

(data.js 파일)
let data = [{}, {}, {}.... {}]

export dfault data

(App.js 파일)
import data from './data.js';

'공부기록 > 프론트공부' 카테고리의 다른 글

리액트 공부4. 리액트 라우터 (0)	2022.06.06
리액트 공부2. 동적 UI (if사용), 반복문(map()사용), 입력 (0)	2022.05.31
Vue 기초 공부 (0)	2022.05.31
뷰 인텔리제이 프로젝트 생성 (0)	2022.05.30
리액트 공부1. 기초 JSX 사용법 (리액트의 자바스크립트) (0)	2022.05.30

부트스트랩 사용하기

이미지 삽입

import export

'공부기록 > 프론트공부' 카테고리의 다른 글

티스토리툴바