쭈링이.log 쭈링이.log

React Router Parameter React Router에서 URL의 파라미터를 설정하려면 path에 :변수를 사용한다. // path 경로 뒤에: 를 붙여 파라미터 변수를 선언한다. 파라미터 변수 선언후 useParams함수를 사용하여 파라미터 값을 변수에 저장한다. // useParams함수를 사용하도록 라이브러리 선언한다. import { useParams } from 'react-router-dom'; function Detail(props) { // path에 선언한 변수명으로 변수를 선언한다. let {id} = useParams(); ... 파라미터값 id변수를 console.log() 함수로 출력했다. 파라미터id의 값으로 각각의 인덱스 데이터를 추출할 수 있다. // Detail...

useNavigate useNavigate란 페이지를 이동할 때 사용한다. useNavigate와 Link의 차이점은 단순히 페이지 이동할 때 사용을 해도 되지만 useNavigate은 특정 이벤트가 실행이 되었을 때 작동이 되도록 이벤트핸들을 설정할 수 있고 로직이 필요한 상황에서도 사용가능하다. // react-router-dom 라이브러리에서 import로 가져와 사용한다. import {useNavigate} from 'react-router-dom'; 위의 코드를 사용하여 useNavigate를 사용할 수 있도록 한다., // useNavigate를 변수로 선언한다. let navigate = useNavigate(); useNavigate 함수를 변수로 선언한다. // 링크가 필요한 부분에 o..

Routes Routes 란 여러개의 route를 담는 태그이다. function App() { let [shoes] = useState(data); return ( // return 속에 Routes태그 를 선언한다. // 선언된 Routes태그 속에 Route태그를 선언하여 페이지를 나눈다. ... Route Route란 React router에 가장 중요한 부분으로 URL 세그먼트를 구성 요소, 데이터 로드 및 데이터 변형에 연결한다. Route는 Router 생성 기능에 전달되는 객체이다. Route들은 집합들로 인해 복잡한 애플리케이션 레이아웃과 데이터 종속성이 단순해지고 선언적이 된다. // path는 URL경로를 나타낸다. // element는 경로의 내용들을 나타낸다. Route 속성중 p..

React router React router 란 사용자가 입력한 주소(URL)에 따라 컴포넌트를 생성해서 보여주는 것이다. React 는 SPA(Single Page Application)방식을 적용해서 사용자가 입력한 주소가 변경되더라도 새로운 html 의 페이지를 보여주는것이 아니고 기존 html에서 컴포넌트를 보여주는 방식이다. React에서 router를 사용하기위해선 react-router-dom 라이브러리를 설치해야한다. npm install react-router-dom@6 터미널에서 프로젝트 디렉토리에 위와같은 명령어 npm install react-router-dom@6 를 입력하면 router 라이브러리가 설치된다. @6은 버전을 나타낸다. 이러한 문구가 나타나면 설치가 완료된것이다...

React Import & Export React 에서 export 또는 import 를 사용할때는 javascrpit export, import 사용방법이 같다. // data.js let data = [ { id: 0, title: "White and Black", content: "Born in France", price: 120000 }, { id: 1, title: "Red Knit", content: "Born in Seoul", price: 110000 }, { id: 2, title: "Grey Yordan", content: "Born in the States", price: 130000 } ] export default data; src 폴더에 data.js 파일을 생성 한 후 expo..

React Image React에서 이미지파일을 불러오기위한 여러 방법이있다. css 파일에서 불러오는 방법은 이러하다. // App.js import logo from './logo.svg'; import { Nav, Navbar, Container } from 'react-bootstrap'; import './App.css'; import 'bootstrap/dist/css/bootstrap.min.css'; import MainBg from './img/bg.png' function App() { return ( My Shop Home Features Pricing // 이미지를 넣기위한 태그 설정 ); } export default App; .main-bg { height: 300px; back..

React Bootstrap React에서 Bootstrap을 사용하기 위해선 외부라이브러리인 Bootstrap을 설치해야 한다. 우선 설치를 위해 React Bootstrap 홈페이지 https://react-bootstrap.netlify.app/ 주소로 들어가서 설치방법을 알아본다. 홈페이지에 들어가서 Get started 버튼을 누른다. (현재 버전은 2.7.4) Introduction 페이지에 Installation 부분에서 bootstrap 설치명령어를 복사하여 VSCode에서 터미널을 연 후 입력하여 bootstrap 라이브러리를 설치한다. npm install react-bootstrap bootstrap 터미널에서 이러한 화면이 나타나면 설치가 완료된 것이다. React Bootstrap..

React class React 에서 class 를 사용할 수 있다. class Modal2 extends React.Component { // React 에서 Component를 받아온다. constructor() {// props를 받아온다. super();// 받아온 props를 호출한다. } render() {//jsx를 반환한다. return (// jsx Hello! ) } } React 에서 extends로 react의 component를 받아와서 class를 사용할 수 있다. constructor에서 부모에게 porps를 받아오고 super로 호출하여 사용 할 수 있다. render 함수로 jsx 를 반환하여 화면에 보여줄 수 있다. /* eslint-disable */ import log..