Research/React40 React_props 간단히 사용하기 간단한 프롭 사용하기 코드다. // src/index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; const author = 'Charles Dickins'; const title = 'Oliver Twist!!!'; const img = './images/book-1.jpg'; const BookList = () => { return ( // you should create className property in React ); }; const Book = (props) => { console.log(props); return ( {/* Dynamically render title .. 2023. 4. 21. React_public 디렉터리에서 이미지 불러오기 들어가기 앞서 이미지를 불러오는 방법은 크게 3가지가 있다. 1. 외부에서 url로 가져오기 2. 로컬 public 디렉터리에서 가져오기 : 성능이 별로 3. 로컬 src 디렉터리에서 가져오기 : 성능이 더 좋다 src 디렉터리에서 불러오는 것이 더 앱 성능 상 좋다고 한다. 하지만 2번째 방법은 사용하기가 편하기 때문에 한번 가볍게 어떤 방식으로 진행되는지 알아볼 겸 2번째로 진행해보겠다. 이미지 디렉터리 이미지 파일이 들어있는 images 디렉터리를 public 디렉터리에 추가해준다. 로컬서버에서 ../images/book-1.jpg로 접속하면 이미지를 볼 수 있다. 이미지 경로 지정 // src/index.js import React from 'react'; import ReactDOM from '.. 2023. 4. 21. React_간단한 list 구현 목표 index.js // src/index.js import React from 'react'; import ReactDOM from 'react-dom/client'; // import CSS file from current working directory import './index.css'; const BookList = () => { return ( // you should create className property in React ); }; const Book = () => { return ( ); }; const Image = () => ( ); const Title = () => Oliver Twist; const Author = () => { return Charles Dickins;.. 2023. 4. 21. React_React 프로젝트 생성하기(with Create-React-App) 설치 React 프로젝트 생성을 위해서는 특별한 도구가 필요하다. 우리는 Create-React-App라는 도구를 사용할 것이다. Create-React-App 말고도 Vite라는 도구도 있는데, 이것도 요즘 많이 쓰는 추세라 한다. Create-React-App 설치 npx create-react-app my-app npx create-react-app@latest tutorial npx 명령어를 사용하려면 node.js가 이미 설치되어야 한다. npx은 설치를 하는 npm과 달리 해당 라이브러리를 실행하는 것이라고 보면 된다. 최신 버전을 설치하고 싶다면 @latest 옵션을 붙여주면 된다. 시간이 좀 걸릴 것이다. 실행 npm start 생성이 완료된 프로젝트의 루트 디렉터리에서 위 명령어를 실행하.. 2023. 4. 20. 이전 1 ··· 7 8 9 10 다음
