본문 바로가기

React12

[React] 영화 목록 App.js : router를 render하는 곳 router는 URL을 보고있는 component임. Link : 새로고침 없이도 다른 페이지로 가게 해주는 것 npm i gh-pages : 결과물을 github pages에 업로드 할 수 있게 해주는 나이스한 패키지 npm run build : 우리 웹사이트의 production ready code를 생성하게 됨 production ready : 코드가 압축되고 모든게 최적화된다는 의미 components/Movie.js import PropTypes from "prop-types" import { Link } from "react-router-dom" function Movie({id, coverImg, title, summary, genres}) .. 2022. 11. 13.
[React] coin list 출력 import {useEffect, useState} from "react"; function App() { const [loading, setLoading] = useState(true); const [coins, setCoins] = useState([]); useEffect(() => { fetch("https://api.coinpaprika.com/v1/tickers") .then((response) => response.json()) //response.json()은 Promise형태로 받음. .then(json => { //json안에는 객체형태로 코인들의 정보가 들어있다 setCoins(json); //coins배열에 json의 내용을 넣음 setLoading(false); }) }, []);.. 2022. 11. 10.
[React] todo App.js import {useEffect, useState} from "react"; function App() { const [toDo, setToDo] = useState(""); //입력값 const [toDos, setToDos] = useState([]); //todo 리스트 const onChange = (event) => setToDo(event.target.value); const onSubmit = (event) => { event.preventDefault(); if(toDo==="") { return; } setToDos((currentArr) => [toDo, ...currentArr]); //배열에 입력된거 추가하고 setToDo(""); }; return ( My to dos.. 2022. 11. 10.
[React] useEffect2 cleanup App.js import {useEffect, useState} from "react"; function Hello() { useEffect(() => { console.log("hi :)"); return () => console.log("bye :("); //component가 종료될때 뭔가 할 수 있도록 해주는 것. cleanup }, []); return Hello } function App() { const [showing, setShowing] = useState(false); const onClick = () => setShowing((current) => !current); return ( {showing ? : null} {showing ? "Hide" : "Show"} ); } expo.. 2022. 11. 10.
[React] useEffect useEffect : 우리의 코드가 딱 한번만 실행될수 있는 것을 보장해줌 첫번째 인자 : 우리가 실행시키고 싶은 함수 두번째 인자 : dependencies, 이것들이 변화할때 실행시킨다 App.js import {useEffect, useState} from "react"; function App() { const [counter, setCounter] = useState(0); const [keyword, setKeyword] = useState(""); const onClick = () => setCounter((current) => current+1); const onChange = (event) => {setKeyword(event.target.value)}; useEffect(() => { .. 2022. 11. 10.
[React] create_react_app기초 npx create-react-app my-app App.js import Button from "./Button"; import styles from "./App.module.css"; function App() { return ( Welcome back! ); } export default App; //style도 저런식으로 따로 이름을 불러와서 할 수 있다는 것 App.module.css .title { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 30px; c.. 2022. 11. 10.

티스토리툴바