본문 바로가기

프론트엔드 공부

 (134)
react localStorage 사용하여 데이터 로컬에 저장후 사용 localStorage로 데이터 저장하기 * localStorage, sessionStorage 차이 Local storage: 영구지속 되는 컴퓨터 임시 저장공간(텍스트만저장,5 mb) Session storage:휘발성이 있는 컴퓨터 임시 저장공간(브라우저끄면날아감,텍스트만저장,5 mb) *데이터 저장시 텍스트로만 저장가능함으로 JSON.stringify 사용, *데이터 불러올시 JSON.parse 사용 //moment패키지,metarialui,mock_data, className의 설정은 테일윈드 import React, { useState, useContext, useEffect } from "react"; import moment from "moment"; /*ui */ import ArrowB..
Contextapi 함수형, 상태값과 변수전달 //app.js [...] import PageContextProvider from "./component/provider/pagecontextprovider"; function App() { return ( [...] //provider폴더의 pagecontextprovider.js import React,{useState, useEffect, createContext} from 'react' export const PageContext = createContext(); const PageContextProvider = (props) => { const [user, setUser] = useState({ 'name':'harrypotter', }); const array2 = [1,2,3,4]; con..
contextapi 예제 1.기존 props 로 state 전송 //app.js import React, {Component} from 'react'; const Family = (props) =>{ return( ) } class Person extends Component{ render(){ return( he i;m {this.props.name} ) } } class App extends Component { render(){ return( i;m app ) } } export default App; 2.createContext 생성후 consumer 사용하여 하위 컴퍼넌트에 value 값 전달 import React, {Component} from 'react'; //1.createContext 생성 (react-dom..
axios로 외부 api, data.json 불러오기 + 로딩소스 추가 const Page1 = ({history, props}) => { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(()=>{ axios("https://fangmin26.github.io/data/personal.json") .then((res)=>{ setData(res.data) }) .catch((err)=>{ console.error("fetch error",err); setError(err) }) .finally(()=>{ //setLoading(false) setTimeout(function(){..
테일윈드시작하기 https://tailwindcss.com/docs/guides/create-react-app Install Tailwind CSS with Create React App - Tailwind CSS Setting up Tailwind CSS in a Create React App project. tailwindcss.com //package.json { "name": "xxx", "version": "0.1.0", "private": true, "dependencies": { "@craco/craco": "^6.2.0", "@material-ui/core": "^4.12.1", "@material-ui/icons": "^4.11.2", "@testing-library/jest-dom": "^5.11.4"..
useState,useEffect 로 parrallex구현 https://codesandbox.io/s/magical-thompson-r5y42?file=/src/Parallax.js
chart.js활용하여 chart 만들기 npm install 시 react-chartjs-2와 chart.js를 같이 인스톨해줘야한다 //Contect.js import React,{useState,useEffect} from 'react' import axios from 'axios'; import { Bar } from 'react-chartjs-2'; const Contents = () => { const [confirmedData,setconfimedData] = useState({}) useEffect(()=>{ const fetchEvents = async () =>{ const res = await axios.get("https://api.covid19api.com/total/dayone/country/kr") console.lo..
axios 활용하여 JSON.stringify로 데이터 가져오기 import React ,{useState, useEffect} from 'react'; import axios from 'axios'; export default function App(){ const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(()=>{ axios("https://randomuser.me/api") .then((res)=>{ setData(res.data) }) .catch((err)=>{ console.error("fetch error",err); setError(err) }) .finally..

티스토리툴바