MapleStory Finger Point
본문 바로가기
[nomad coder] 리액트 기초 7 - 총정리 - 현재 리액트 프로젝트를 진행한 폴더의 구성이다. - 영화를 불러오고 펼쳐주는 기능을 하는 코드를 컴포넌트로 따로 구분하였으며 - 라우터 기능을 이용하기 위해 메인화면(Home), 그리고 영화 상세정보(Detail) 화면을 구성하였다. - App.js에서 라우터 기능을 이용하여 창전환을 할 것이고, - Index.js는 이렇게 구성된 App.js를 root아래에 rendering 해줄것이다. index.js import React from "react"; import ReactDOM from 'react-dom/client'; import App from "./App"; // import "./styles.css"; const root = ReactDOM.createRoot(document.getEle.. 2022. 11. 26.
[nomad coder] 리액트 기초 6 - Movie App import React from 'react'; import { useState, useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import reportWebVitals from './reportWebVitals'; import Movie from './components/Movie'; 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_.. 2022. 11. 25.
[nomad coder] 리액트 기초 5 - API(코인 시세표) import React from 'react'; import { useState, useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import reportWebVitals from './reportWebVitals'; function App(){ const [loading, setLoading] = useState(true); const [coins, setCoins] = useState([]); useEffect( () => { fetch("https://api.coinpaprika.com/v1/tickers") .then((response) => response.json()) .then((json) => { setCoins(jso.. 2022. 11. 25.
[nomad coder] 리액트 기초 4 - todo list 만들기 import React from 'react'; import { useState, useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import reportWebVitals from './reportWebVitals'; function App(){ const [text, setText] = useState("") const [todos, setTodos] = useState([]) const onSubmit = (event) => { event.preventDefault(); if ( text === "" ){ return; }; setTodos((currentArray) => [...currentArray, text]); setTex.. 2022. 11. 25.
[nomad coder] 리액트 기초 3 - 번외(Cleanup Function) import React from 'react'; import { useState, useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import reportWebVitals from './reportWebVitals'; function Hello(){ useEffect( () => { console.log("created!"); return (() => {console.log("destroyed")}) } , []) return Hello; } function App(){ const [showing, setShowing] = useState(false); const onClick = () => setShowing((prev) => !p.. 2022. 11. 24.
[nomad coder] 리액트 기초 3 import React from 'react'; import { useState, useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import reportWebVitals from './reportWebVitals'; // import Button from './Button'; import styles from './App.module.css' function App(){ const [counter, setCounter] = useState(0); const [keyword, setKeyword] = useState(""); const onClick = () => setCounter(prev => prev + 1); const onC.. 2022. 11. 24.