안녕하세요

API로 데이터를 받아와 itm에 저장합니다. const [itm, setItm] = useState(); useEffect(() => { // useEffect로 데이터를 바로 불러옵니다. const url = " { const res = await axios.get(url); // axios를 이용합니다. const shopdata = res.data.slice(50, 140).map((it) => { // shopdata 변수에 데이터 배열을 저장합니다. return { id: it.id, name: it.name, src: it.image_link, brand: it.brand, }; }); setItm(shopdata); // 데이터를 state에 담습니다. }; getProduct(); }, ..

1. 렌더링되는 화면과 데이터를 불러오는 시간 차이 해결 옵셔널 체이닝으로 React의 life cycle로 인해 발생하는 undefined 문제를 경우에 따라 간단하게 해결할 수 있습니다. 옵셔널체이닝은 ?.앞의 평가대상이 undefined나 null이면 평가를 멈추고 undefined를 반환하게 됩니다. undefined로 인한 렌더 오류가 있을 때 옵셔널체이닝을 적용하면 데이터를 불러온 뒤에 화면에 렌더링 되도록 합니다. 2. 디버깅을 어렵게 하니 존재하지 않아도 되는 값에만 사용 하지만 많은 경우에 undefined가 존재할 수 있기 때문에 남용을 하게 되면 나중에 디버깅이 힘들어지게 됩니다. 따라서 평가대상이 존재하지 않아도 상관이없는, 예를 들어 특정 객체의 속성 중요하지 않은 속성과 같은 경..

data폴더에 받아온 data를 props에 담아 전달할 것입니다. 변수를 만들고 변수명으로 export 해줍니다. const company = { name: "쇼핑몰", adress: "부산", tel: "00000000", fax: "11111111", }; const profile = { slogan: "슬로건입니다.", }; const content = [ { con: "슬로건01", des: "내용01" }, { con: "슬로건02", des: "내용02" }, { con: "슬로건03", des: "내용03" }, ]; export { company, profile, content }; 변수를 import 하여 props로 전달합니다. import React from "react"; impo..

scss 사용방법입니다. 설치를 합니다. $ npm i -D sass 들여쓰기를 통해 코드를 작성하고, 연달아 붙는 클래스는 &로 연결합니다. .App { color: #f00; strong { font-size: 100px; } &:hover { color: #369; } &.on { color: #ff0; } } scss는 @문자로 함수를 사용할 수 있습니다. @for $i from 1 through 3 { .itm#{$i} { background: url(../../public/assets/images/main_visual0#{$i}.jpg); } } module.css를 사용하는 이유는 서로 다른 키를 가진 동일한 클래스명을 가질수 있도록 할 수 있기 때문입니다. module.css를 사용하는 방..