Jieunny의 블로그

React Router : 페이지 전환 Browser Router url이 보통 웹사이트 처럼 생김. Hash Router 앞에 /#/이 붙음. Switch : Route 를 찾음 (Route는 URL을 의미) function App() { return } 누군가 우리 웹사이트에 "/" url에 있다면 Home 컴포넌트를 보여준다. Link : 새로고침 없이도 유저를 다른 페이지로 이동시켜주는 컴포넌트. {title} Dynamic url 도 지원함 : url에 변수를 넣을 수 있다. // id앞에 ':' 안쓰면 그냥 텍스트 id쓴 것과 같음 useParams() : url 에 있는 변경되는 변수를 반환해준다. 동적 라우팅을 설정해주어야한다. API & fetch API : React 애플리케이션에 사용..

fetch() : JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 함수. import React from 'react'; import { useState, useEffect } from 'react' ; function App() { const [loading, setLoading] = useState(true); const [coins, setCoins] = useState([]); //가지고 있는 coin 데이터를 State로 가져오기 위함. useEffect(() => { fetch("https://api.coinpaprika.com/v1/tickers") .then((response) => response.json())//response를 받아서 response..

import { useEffect, useState } from "react"; function App() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => setToDo(event.target.value); const onSubmit = (event) => { event.preventDefault(); if(toDo === ""){ return; } setToDos(currentArray => [toDo, ...toDos]) //function(currentArray)와 같은 것 setToDo(""); }; console.log(toDos); return ( M..

component 가 destroyed 될때를 알고 싶으면 생성해주는 함수에서 return 해줘야 한다. import { useEffect, useState } from "react"; function Hello(){ useEffect(() => { console.log("Created :)"); return () => console.log("destroyed :("); }, []) return Hello } function App() { const [showing, setShowing] = useState(false); const onClick = () => setShowing((prev) => !prev); return ( {showing ? : null} {showing ? "HIDE" : "SHO..

state가 변경되면 모든 코드가 re-render된다. state가 변경되도 re-render 하고 싶지 않은 코드가 있다면? useEffect useEffect(iRunOnlyOnce, []); 첫번째 argument : 한번만 실행되게 하고 싶은 코드 (iRunOnlyOnce 는 function). 두번째 argument : 이 state가 변화될때만 첫번째 argument 코드가 re-render 됨 ([]로 비워두면 처음 한번만 실행됨). function App() { const [counter, setCounter] = useState(0); const [keyword, setKeyword] = useState(""); const onClick = () => setCounter((prev) =..

Prop : 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법. App() 에 있는 컴포넌트에 다는 것들은 오직 props. Memo : props가 변경되지 않는 컴포넌트는 re-render 해주지 않는다. ​ propTypes : 자료형에 맞지 않는 정보가 오면 error를 띄워줌.