영화 (36) 썸네일형 리스트형 11. Practice Moive App - React Router 1. Visual Studio Code 툴 내 터미널에서 아래 명령어를 실행한다.: npm install react-router-dom 2. react-router-dom를 import 시켜준다.: 여러개가 아닌 하나만 랜더링 하기 위해서 Switch(Routes)를 사용한다.import { BrowserRouter as Router, Switch, Route} from "react-router-dom";function App() { // 누군가 만들어 놓은 컴포넌트를 잘 사용하면 된다. // Swith(Routes)가 하는 역할은 Route를 찾는 것인데 Route는 URL을 의미한다. // 사용자가 "/" 경로에 있으면 Home Route를 랜더링한다. return } .. 10. Practice Movie App - part Two Visual Studio Code 툴 내 터미널에서 아래 명령어를 실행한다.: npm i prop-types: npm install react-router-dom App.jsimport logo from './logo.svg';import './App.css';import { useEffect, useState } from 'react';import Movie from "./components/Movie";function App() { return null;}export default App; Movie.jsimport PropTypes from "prop-types"; //prop-types를 사용하기 위해서는 터미널에서 npm i prop-types를 실행해야 한다!function Movie.. 09. Practice Movie App - part One import logo from './logo.svg';import './App.css';import { useEffect, useState } from 'react';function App() { const [loading, setLoading] = useState(true); const [movies, setMovies] = useState([]); const getMovies = async() => { const json = await(await fetch(`https://yts.mx/api/v2/list_movies.json?minimum_ration=8.8&sort_by=year`)).json(); setMovies(json.data.movies); setLoading(fal.. 08. Coin-Tracker import logo from './logo.svg';import './App.css';import { useEffect, useState } from 'react';function App() { const [loading, setLoading] = useState(true); const [coins, setCoins] = useState([]); useEffect(()=>{ //fetch("https://api.coinpaprika.com/v1/tickers"); /* 크롬 브루우저에서 F12로 network탭을 보면 tickers를 요청했다는 것을 확인할 수 있다. tickers를 클릭하면 Preview, Response 탭을 확인할 수 있는데, Pre.. 07. Practice Movie App - To Do List import logo from './logo.svg';import './App.css';import { useState } from 'react';function App() { const [toDo, setToDo] = useState(""); //setToDo는 toDo값을 수정하는 함수이고, toDo값은 input이랑 연결되어 있음 const [toDos, setToDos] = useState([]); const onChange = (evnet) => { setToDo(evnet.target.value); }; const onSubmit = (evnet)=>{ evnet.preventDefault(); if(toDo == ""){ return; }; s.. 06. Cleanup 05. useEffectuseEffect function은 코드가 한번만 실행될 수 있도록 보호해주는 것이다. useEffect(함수, [변수]); 위의 형태로 사용되는데 변수 값이 변화면 함수 내 코드가 작동한다!!!import logo from './logo.svg';//import 'bonsimony.tistory.com useEffect(() => { console.log("hi :)"); return () => { console.log("bye :("); }; }, []);useEffect(function(){ console.log("hi :("); return function(){ console.log("bye :)"); }; .. 05. useEffect useEffect function은 코드가 한번만 실행될 수 있도록 보호해주는 것이다. useEffect(함수, [변수]); 위의 형태로 사용되는데 변수 값이 변화면 함수 내 코드가 작동한다!!!import logo from './logo.svg';//import './App.css';//import Button from "./Button";//import styles from "./App.module.css";import { useEffect, useState } from 'react';function App() { const [counter, setValue] = useState(0); const [keyword, setKeyword] = useState(""); const onClick = (.. 04. Tour of CRA 03. CREATE REACT APPCreate React App을 사용하지 않고 스크립트를 import함으로써 React를 구현할 수 있지만 Create React App를 사용하면 ReactJS 어플리케이션을 만들때 훨씬 쉽고 많은 사전 설정들을 준비해준다.즉, create-reactbonsimony.tistory.com 바로 앞 게시글에 "cd c:\" 명령어와 NPX(Node Package eXecutor) 를 활용하여 "npx create-react-app react-for-beginners" 명령어를 통해 C드라이브에 react-for-beginners 폴더를 생성하면서 어플리케이션이 생성되었다. 수정하기 전 소스와 수정 후 소스를 비교하여 수정한 내용을 확인하기 위해서 아래 소스를 첨.. 이전 1 2 3 4 5 다음