개발일지

구현할 내용 로그인 페이지에서 form input에 입력된 내용을 Axios를 이용한 json 형식으로 서버에 전달 학습 input에 입력된 값을 useState로 담아 그 값을 JSON.stringfy로 변환하여 변수로 저장한다. Axios는 Promise API를 이용하기 때문에 각 상태에 따라 행동을 입력한다. 프로젝트 진행 package.json에 백엔드와 proxy를 맞추기 위해 proxy를 추가한다. 이번 프로젝트에서 백엔드 포트는 8080을 사용하여서 포트를 맞춰주었다. 그리고 index.tsx에 axios 기본값을 추가하였다. package.json "proxy": "http://localhost:8080" index.tsx axios.defaults.baseURL = "http://loc..

정말 어려웠던 문제였다. 구현할 내용 localstoage에 상품리스트에서 디테일 진입시 localstorage에 그 상품의 id 저장 그 후 상품리스트에서 useEffect로 마운트 될 때 localstorage의 아이디를 이용하여 json의 index, 그 중 title을 출력하기. 학습 localStorage.setItem('데이터이름', '데이터'); localStorage.setItem('데이터이름', 'JSON.stringify(값)'); localStorage.getItem('데이터이름'); localStorage.removeItem('데이터이름') 첫 행 - localstorage의 key : value를 설정한다. 두 번째 행 - localstorage의 key : json형식으로 값을 ..

store.js에서 state를 생성하여 값을 매기고 export하여 컴포넌트에 적용시키기 (store.js) import { configureStore, createSlice } from "@reduxjs/toolkit"; let user = createSlice({ name: "user", initialState: "kim", store.js에서 createslice({})를 선언한다. 이 안에서 상태가 관리된다. name은 보통 변수명과 동일하게 설정하고 initialState의 값이 useState의 변수자리와 비슷하다. (초기값) (store.js) import { configureStore, createSlice } from "@reduxjs/toolkit"; let user = createS..

리덕스를 사용하는 이유 리액트는 부모 컴포넌트에서의 props를 자식 컴포넌트로 넘겨줄 수 있다. 그러나 자식의 자식이 그 props를 사용할 경우 props drilling이 발생하기 때문에 컴포넌트가 많으면 많을수록 일이 번거로워져 스테이트를 컴포넌트 밖 전역에서 관리할 수 있게 도와주는 라이브러리이다. 그래서 리덕스에서 만든 스테이트를 원하는 곳에서 꺼내 쓸 수 있게된다. 리덕스는 모든 곳에서 사용할 수 있지만 프롭스를 단순하게 넘겨주는 컴포넌트는 리덕스를 사용하는 것보다 코드 양이 적기 때문에 컴포넌트가 복잡한 곳에 사용하는 것이 적절하다. 리덕스 설치 npm npm install @reduxjs/toolkit react-redux store.js 생성 (state들을 보관할 곳) import {..

Context API App.js에서 자식 컴포넌트에 데이터를 넘겨주기 위해 props 사용이 가능하다. 부모 => 직계 1차 자식 컴포넌트에 props를 넘기는 것은 간단하지만 그 자식에 자식에 자식까지 props를 넘겨주려면 의도하지 않은 결과가 나타날 수 있고 번거롭기도 하다. 이를 위해 프롭스 드릴링을 피하기 위한 Context API가 사용된다. App.js => Item(props) => ItemDetail(props) < = = = 번거로운 과정 사용법 (App.js) export let itemContext = createContext(); //context exprot function App(){ let [item, itemValue] = useState([10,11,12]); retur..

리액트에서 SPA로 구현한 UI에 애니메이션 효과를 배웠다. 필요한 것 CSS로 애니메이션 구성 A에서 B로 넘어갈 때 A에 props부여 (ex. fade={변수}) => useState의 변수 or 변수선언 (" ") B에서 작업. useState, useEffect 사용 css .fadeAni { opacity: 0; } .end { opacity: 1; transition: all 1s; } A.js (props 넘기기) import { useState, useEffect } from "react"; function App() { const ani = ""; //애니메이션 프롭스 넘기기 {/* depth에 애니메이션 부여 */} { navigate("/react/menu"); }} classNam..

axios는 AJAX를 사용하기 위해 사용된다. ajax는 서버와 통신하기 위한 비동기 자바스크립트이다. 제일 큰 장점은 새로고침 없이 서버와 통신하여 자료를 불러오는 것이고 axios는 이 ajax를 이용하기 위한 라이브러리이다. import axios from "axios"; { axios .get("https://raw.githubusercontent.com/eodovo/react-shop/main/src/data/data2.json") .then((result) => { const moreProudct = [...item, ...result.data]; setItem(moreProudct); }) .catch(() => { alert("데이터를 받는데에 실패했습니다."); }); }} > MORE..

1. 버튼이 있다고 가정하기 const [title, setTitle] = useState(data); //데이터 값 {}>낮은가격순 {}>>높은가격순 2. 기존 배열이 있는 경우 배열 복사, 함수 작성 function downPriceSort() { return [...title].sort((a, b) => a.price - b.price); } function upPriceSort() { return [...title].sort((a, b) => b.price - a.price); } return이 없으면 정렬 값 반환이 안됨. sort 메소드는 매개변수와 계산식이 필요함. price는 json의 number 타입 3. 버튼 태그에 state함수 안에 정렬을 해주는 함수를 넣음. { setTitle(..