728x90 Research/React40 React_logo import하기 src 폴더의 로고 이미지를 가져와서 사용하는 방법을 알아보자. src내 로고 이미지를 import한 다음, 이미지 태그의 src 프로퍼티의 값으로 {logo}을 넣어주면 logo 경로를 전달할 수 있다. // src/components/Navbar.js // Logo imported from src/images/logo.svg import logo from '../images/logo.svg'; const Navbar = () => { return ( ... ); }; export default Navbar; 2023. 4. 24. React_local images(src folder) public이 아니라 src 폴더에서 바로 이미지를 가져오는 방법을 알아보자. 이 방법이 성능이 더 좋다고 한다. // src/books.js // images from src/images/book-n.jpg import img1 from './images/book-1.jpg'; import img2 from './images/book-2.jpg'; import img3 from './images/book-3.jpg'; console.log('fukc'); const books = [ { author: 'Charles Dickens', title: 'Interesting Topics', img: img1, id: 1, }, { author: 'Laura Dave', title: 'The Last Thin.. 2023. 4. 24. React_ES6 모듈로 파일 분리하여 코드 클린하게 하기 ES6 Module named : importing name should be same default : you can customise importing name 1. named import // src/books.js export const books = [ { author: 'Charles Dickens', title: 'Interesting Topics', img: './images/book-1.jpg', id: 1, }, { author: 'Laura Dave', title: 'The Last Thing He Told Me', img: './images/book-2.jpg', id: 2, }, ]; // src.. 2023. 4. 24. React_prop으로 받아온 함수 작동 안되는 문제. 래퍼 함수, 익명 함수로 해결하기 문제. 잘못된 예시 // src/index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; const books = [ { author: 'Charles Dickens', title: 'Interesting Topics', img: './images/book-1.jpg', id: 1, }, { author: 'Laura Dave', title: 'The Last Thing He Told Me', img: './images/book-2.jpg', id: 2, }, ]; const BookList = () => { const getBook = (id) => { const book = book.. 2023. 4. 24. 이전 1 ··· 5 6 7 8 9 10 다음 more 728x90
