데브힐러의 프로그래밍

설치 $yarn add redux react-redux index.js 세팅하기 1) import Provider 하기 2) 로 감싸기 3) createStore() 안에 state저장 4) 에 props 전송 import {Provider} from 'react-redux'; import { createStore } from "redux"; let store = createStore(()=>{ return [{ id : 0, name : '멋진신발', quan : 2 }] }) ReactDOM.render( , document.getElementById("root") ); Cart.js 컴포넌트에서 store에 있는 state쓰려면 1) function을 만든다. 2) ex..

1 App function 밖에 입력(범위 생성) let 재고context = React.createContext(); 2. 같은 값을 공유할 HTML을 범위로 싸기 {shoes.map(function (a, i) { return ; })} 로 싸여진 콤포넌트는 props전송없이 재고라는 state가 사용가능하다. 3. useContext import import React, { useState, useContext } from "react"; 4. Card콤포넌트 안에 재고 변수안에 값을 입력하고 재고 변수 사용하기 let 재고 = useContext(재고context);

Ajax는 서버에 새로고침없이 요청을 할 수 있게 도와준다. 요청의 종류 1. GET요청: 주소창에 URL입력. 페이지/자료읽기 2. POST요청 : 서버로 중요 정보 전달 Ajax 쓰는 법 1. jQuery 설치 후 $.ajax() 2. axios 설치 후 axios.get() 3. 바닐라 자바스크립트로 fetch() 리액트에서는 axios를 사용한다. 설치 #yarn add axios import axios from 'axios'; { axios.get('api주소') .then((result)=>{ console.log(result.data) }) .catch(()=>{ console.log('실패') }) }}>더보기 요청한 자료는 따옴표가 있는 JSON..

let [alert, alert변경] = useState(true); let [inputData, inputData변경] = useState(''); useEffect(() => { let 타이머 = setTimeout(() => { alert변경(false) }, 2000); }, [alert]);​ class Detail2 extends React.Component { componentDidMout(){ } componentWillUnmount(){ } } useEffect 사용법 /*Detail function 안에*/ useEffect(()=>{ }); 컴포넌트가 mount되었을 때, 컴포넌트가 update 될 때 특정 코드를 실행할 수 있다. 1. Detail 페이지에 진입후 alert 창이 2..

아래의 코드는 태그 중복 에러가 난다. Home a태그 중복 에러 해결법

설치 #yarn add node-sass $메인칼라 : #ff0000; .red { color: $메인칼라; } div.container h4 { color : blue; } /*sass문법 셀렉터 대신 쓰는 nesting */ div.container { h4 { color: blue; } p { color : green; } } .my-alert { background: #eeeeee; padding: 20px; border-radius: 5px; max-width: 500px; width: 100%; margin: auto; } .my-alert p { margin-bottom: 0; } //다른 색상의 ui가 필요하면? //sass의 복붙하기 문법 extend .my-alert2 { @extend..

설치 # yarn add styled-components import styled from 'styled-components'; let 박스 = styled.div` padding : 20px; `; let 제목 = styled.h4` font-size : 25px; color : ${ props => props.색상 } `; /*Detail function밖에 선언할 것*/ /*Detail function 안에 있는 태그*/ 상세페이지 혹은 상세페이지

설치: npm install react-router-dom@5 index.js 파일 import { BrowserRouter } from 'react-router-dom'; --태그를 BrouserRouter로 감싸기 ** HashRouter를 쓰는 경우 URL에 /#/추가됨 routing을 안전하게 하는 용도임 사이트 주소 뒤에 #이 붙는데 #뒤에 적는 것은 서버로 전달하지 않음 그래서 라우팅을 리액트가 알아서 잘 해줄 수 있다. BrouwerRouter의 경우 라우팅을 리액트가 아니라 서버에게 요청할 수 도 있어서 위험하다. 서버가 그런 페이지 없는데? 하고 응답할 수 있음. 그래서 서버에서 서버 라우팅을 방지하는 API를 작성해둬야한다. App.js 파일 import { Link, Route, Sw..

let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집', '패션 옷가게']) let [따봉, 따봉변경] = useState([0, 0 , 0]); let [modal, modal변경] = useState(false); function 따봉up(i){ var newArray = [...따봉] newArray[i] = newArray[i] +1; 따봉변경(newArray); } function 제목바꾸기() { var newArray = [...글제목]; newArray[0] = '여자 코트 추천'; 글제목변경(newArray); } { 글제목.map(function (글, i) { return ( {글} {따봉up(i)} }>👍{따봉[i]} 2월 18일 발행 ) }) }

var 어레이 = [2, 3, 4]; var 뉴어레이 = 어레이.map(function(a){ return a*2 }) { 반복된UI() } function 반복된UI(){ var 어레이 = []; for (var i = 0; i