근데 JS에서 변수안에 변수를 넣어주려면 '+ +'사용해서 넣어줘야 함
import bg from '이미지경로';
react bootstrap에서 이미지 3개 분할해서 넣고싶으면?
column 또는 grip 검색하기
html에서 public 폴더 이미지 사용할 때는?
<img src="/img1.jpg"></img>이런식으로 코드 작성해주면 됨!
보통 src - image폴더 안에 img 파일 넣어서 사용하는데,
그렇게 하면 발행과정에서 src안의 폴더/파일명이 변경되면서 압축될 수 있기 때문에
상단에 import 해서 사용해야 함.
근데 public폴더에 img파일을 넣으면 import 없이 사용가능.
여러개의 이미지 파일을 불러올때마다 import 하는건 너무 비효율적이기 때문에
애초에 public에 이미지 파일을 넣어놓고 불러오는것도 좋은방법!
html에서 public폴더 이미지 사용할 때는 그냥 /이미지경로 로 사용해주면 됨!
주의사항
happyhb.com 으로 발행시에는 상관없지만,
happyhb.com/어쩌구/ 이렇게 발행할때에는 문제 발생 가능성 있음.
따라서, 홈페이지에서 권장하는 방식대로 써주는게 좋음
<img src="{process.env.PUBLIC_URL + "img1.jpg"></img>
export, import 하는 법
JS코드가 너무 길어지는 경우, 따로 JS파일을 만들어서 불러오는 방법 사용 가능
export 하는 법
-> export default 변수명
export 여러개 하는 법
export {a , b}export {변수1, 변수2} 이런식으로 중괄호 안에 넣어서 사용
-> 이 경우 import 할 때도
import {a, b} from './data.js';이렇게 중괄호로 불러와서 사용해야함
import 하는 법
return안에 가져오고 싶은 위치에 {작명} 이런식으로 불러와서 쓰면 됨
-> import 작명 from '파일경로'
- 참고 : 컴포넌트도 export 가능하기 때문에 함수가 길어질 것 같으면 따로 빼서 불러오는 것도 추천
object 자료 vs array 자료
- object 자료
let a = { name: 'been', age: 27 }불러올때는 a.name a.age 이런식으로 변수.제목 으로 사용
- array 자료
let b = ['been', 27]불러올때는 b[0] 이렇게 인덱싱해서 사용
복잡한 자료에서 데이터를 불러올때는 시작기호만 잘 보면 됨!
[ 로 시작하면 무조건 array --> index활용
