본문 바로가기

💻WEB FrontEnd

(66)

detail 페이지 만들기 리액트 라우트 적으로 구현해보자 => useParams()함수 이용 - App.js import './App.css'; import { useState } from 'react'; import data from './data.js'; import {Routes, Route } from 'react-router-dom'; import DeatailPage from './pages/DetailPage'; function App() { let [shoes] = useState(data); let navigate = useNavigate(); return ( //상세페이지로 이동 ); } export default App; - DetailPage.js import { useParams } from "react-..

라우팅 (셋팅, navigate, nested routes, outlet) react-router-dom 라이브러리 설치 터미널에 다음 명령어 입력 npm install react-router-dom@6 그 다음 index.js 파일로 가서 import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); ▲ import 어쩌구 해오고 이걸로 이걸 감싸면 끝 라우팅 사용법 - App.js import './App.css'; import {Routes, Route, Link} from 'react-router-dom'; function App() { let [shoes] = useState(data); retu..

import, export export default 변수명; 이렇게 쓰면 원하는 변수를 밖으로 내보낼 수 있다. //data.js 파일 let a = 10; export default a; //변수가 여러개면 let a = 10; let b = 20; export default { a, b }; 다른 파일에 있는 데이터를 import해서 가져올 수 있다. //App.js 파일 import a from './data.js'; //변수가 여러 개면 import { a, b } from './data.js';

이미지 삽입하는 방법 이미지를 삽입하는 방법 방법 ①. App.css 파일에 이미지 경로 지정 //App.js //App.css .main-bg { height: 300px; background-image: url('./img/bg.png'); background-size: cover; background-position: center; } 방법 ②. App.js 파일에 이미지 경로 지정 import './App.css'; import imgpath from './img/bg.png' function App() { return ( ); } export default App; public 폴더에 이미지를 저장 여러가지 소스코드는 src 폴더에 보관하면 되는데 이미지같은 static 파일의 경우 public 폴더에 보관해도 됩니..

React에 Bootstrap 적용 react bootstrap 라이브러리 설치 https://react-bootstrap.github.io/getting-started/introduction 1. 프로젝트에 react bootstrap 설치 npm install react-bootstrap bootstrap 2. css 파일 import 방법① App.js 파일에 다음 코드 삽입 import 'bootstrap/dist/css/bootstrap.min.css'; 방법② index.html 파일에 다음 코드 삽입

props : 부모 -> 자식 state 전송 1. props로 부모 -> 자식 state 전송하는 법 자식컴포넌트 사용하는 곳에 가서 자식컴포넌트 만드는 function으로 가서 props라는 파라미터 등록 후 props.작명 사용 참고. 1) props는 이렇게 10개 100개 1000개 무한히 전송이 가능하다. 2) 꼭 state만 전송할 수 있는건 아니다. 일반 변수, 함수 전송도 가능하고 일반 문자전송은 중괄호 없이 이렇게 해도 된다. 3) 부모 -> 자식 외 다른 관계에서는 state 전송이 불가능하다! ex. 부모 컴포넌트의 state(글제목)를 자식 컴포넌트 에 전송 function App (){ let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']); return ( ) } fun..

반복되는 요소 처리 방법 (map, for) 1. 자바스크립트 map 함수 기능 1. array에 들어있는 자료갯수만큼 그 안에 있는 코드를 반복실행해줍니다. var 어레이 = [2,3,4]; 어레이.map(function(){ console.log(1) }); => console.log(1) 3번 실행됨 기능 2. 콜백함수에 파라미터 아무렇게나 작명하면 그 파라미터는 어레이 안에 있던 모든 자료를 하나씩 출력해줍니다. (그냥 소괄호안에 있는 함수를 콜백함수라고 합니다) var 어레이 = [2,3,4]; 어레이.map(function(a){ console.log(a) }); => 2, 3, 4가 콘솔창에 출력됨 기능3. return 오른쪽에 뭐 적으면 array로 담아줍니다. var 어레이 = [2,3,4]; var newArray = 어레이.ma..

React 컴포넌트 리액트에서 동적인 UI 만드는 방법 1. html css로 미리 UI 디자인을 다 해놓고 2. UI의 현재 상태를 state로 저장해두고 3. state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성 step 1. html css로 미리 디자인해놓기 제목 날짜 상세내용 step 2. UI의 현재 상태를 state로 저장 state 하나 만들고 거기에 현재 UI의 상태정보를 저장 let [modal, setModal] = useState(false); let [modal, setModal] = useState('닫힘'); let [modal, setModal] = useState(0); step 3. state에 따라서 UI가 어떻게 보일지 작성 function App (){ let [modal, se..

잠깐 사용할 데이터 저장 방법 2가지 1. 변수 이용 import { useState } from 'react'; function App() { let post = '부제목'; return ( {post} //변수를 이용하는 방법 ); } 2. state 이용 import { useState } from 'react'; //import {useState} function App() { let [a,b] = useState('잠깐 저장할 데이터'); //useState(보관할자료) return ( { a } //a:보관했던 자료, b:state변경도와주는 함수 ); }

React 프로젝트 생성 + JSX문법 React 설치·실행 일반적으로 create react app이라는 라이브러리를 이용해서 프로젝트를 생성하는게 일반적이다. 1) 프로젝트 생성 react프로젝트를 생성할 폴더에 다음 명령어 입력한다. npx create-react-app blog 2) 생성된 프로젝트 미리보기 미리보기 실행하려면 terminal에 다음 명령어를 입력한다. npm start //localhost:3000 JSX 1) JSX(JavaScript XML)란? - JSX는 Javascript에 XML을 추가한 확장한 문법이다. - JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. - 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. // 실제 작성할 JSX..

이전 1 2 3 4 5 ··· 7 다음

티스토리툴바