React 기초 ( 6 )- Bootstrap

React-Bootstrap 사용법

 

버튼이 필요하면 React-Bootstrap 사이트에서 검색해서 예제코드를 복붙하면 버튼 생성 끝입니다. 

대신 복사붙여넣기할 때 대문자로 시작하는 컴포넌트이름은 상단에 저렇게 import 해와야합니다. 

 

이미지 넣는법 & public 폴더 이용하기

(1)css파일에서 src안의 이미지 넣을 때

App.js파일

app.css

=>css 파일에서 src폴더의 이미지를 넣을땐 ./이미지경로

(2)html에서 src폴더의 이미지 넣을 때

1. import 작명 from './이미지경로' 한 다음에

2. 이미지경로가 필요한 곳에서 작명한걸 사용하면 됩니다. 

<img>태그 쓰고싶으면 <img src={bg}/> 이렇게 써도 보입니다. 

 

Bootstrap으로 레이아웃 짜기

복붙하면 됨 모바일에선 알아서 세로정열도 해줌...

 

이미지 불러오기

 

public 폴더의 용도

html에서 src 폴더 이미지 사용할때 import 부터 해야하는데 이미지가 100개면 100개를 해야한다.

그래서 public폴더를 이용해주면 편리함.

대신 리액트로 개발을 끝내면 build 작업( 지금까지 짰던 코드를 한 파일로 압축해주는 작업)이라는걸 하는데 

src 폴더에 있던 코드와 파일은 다 압축이 되는데 public 폴더에 있는 것들은 그대로 보존해줍니다. 

그래서 형태를 보존하고 싶은 파일은 public 폴더에 넣으면 되는데 js 파일은 그럴 일은 거의 없고 

이미지, txt, json 등 수정이 필요없는 static 파일들의 경우엔 public 폴더에 보관해도 상관없습니다.

 

 

public 폴더에도 이미지 보관가능

이렇게 /이미지경로로 사용하면 됨

+ 하지만 권장되는 방식은 이렇게입니다.

왜냐면 리액트로 만든 html 페이지를 배포할 때

codingapple.com 경로에 배포하면 아무런 문제가 없지만

codingapple.com/어쩌구/ 경로에 배포하면

/logo192.png 이렇게 쓰면 파일을 찾을 수 없다고 나올 수도 있습니다. 

그래서 /어쩌구/ 를 뜻하는 process.env.PUBLIC_URL 이것도 더해주면 된다고 하는군요. 

 

codingapple.com/어쩌구/ 경로에 리액트로 만든 페이지를 배포할 일이 아예 없으면 굳이 안해도 됩니다.