[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] 리액트 기초 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. [nomad coder] 리액트 기초 2 import React from 'react'; import ReactDOM from 'react-dom/client'; import reportWebVitals from './reportWebVitals'; function Btn({text, big}){ return {text} ; } function App(){ return( ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render() reportWebVitals(); 컴포넌트를 재사용 하는 방법에 대해 알아보았다. 컴포넌트의 매개변수를 설정하고, 컴포넌트를 사용하면서 인수로 text="value" 를 넘겨주면, 해당 인수를 사용할 수 있다. function.. 2022. 11. 24. 이전 1 2 3 다음
