Frontend/React (34) 썸네일형 리스트형 최근 리액트 라우터 React Router 변화 현재 쓰고 있는 라우터 버전이다. "react-router-dom": "^6.2.1" 변화 과거랑 다르게 라우트 버전이 변경됨에따라 다음과 같은 변화가있었다. - Switch에서 Routes로 - Component={컴포넌트명} -> element={} - 안으로 감싸는대신 -> 예시 전 후 import { BrowserRouter, Routes, Route } from 'react-router-dom' import Home from './pages/Home' import Edit from './pages/Edit'; import Detail from './pages/Detail'; import Add from './pages/Add'; import Signin from './pages/Signin'; .. [오류해결] You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). create-react-app버전때문에 리액트 프로젝트가 안만들어짐 npm uninstall -g create-react-app global로 설치된 create-react-app구버전을 지우고 npx clear-npx-cache 이처럼 캐시를 없애야 또 같은 에러가 안뜨는듯하다. 리덕스 기초 리덕스? store를 두어 관리하고 중앙 집중관리체계를 유지 리덕스는 단 하나의 단일 스토어를 유지한다. 리덕스를 해야 하는 이유 컴포넌트간의 의존성을 낮추고 각자의 비즈니스 로직(컴포넌트)에 집중하기 위해서 예를들어 리덕스를 사용하지않을경우 코드가 복잡해짐에따라 서로의 연관성 또한 복잡하게되므로 수정이 필요한상황에 모든 컴포넌트들을 일일이 수정해야함 리액트에서의 리덕스 앱전체에서 데이터를 자주 전달하게되는건 모두알고있다. 기존에 리액트 컴토넌트단에서 useState hook을 사용하였는데 컴포넌트 내에서 상태관리는 가능하지만 전역에서 상태관리를 하게될경우 리덕스의 필요성이 느껴진다. 리덕스를 사용하게되면 어느 컴포넌트든 자유롭게 가져올수있게된다. 리덕스 설치 리덕스를 사용하기위해 크게 2가지 방법이있다.. Vue 기초문법정리 v-model @click add v-for props, state props는 배열보다는 객체를 쓰는게 좋음 {{text}} {{text}} type을 Number로 명시해주면 다른타입일때 에러가나서 알려줌 required:true는 아무값도 입력안하면 에러남 default는 아무값도 입력안하면 'hello'로 입력됨 :변수명안에는 명사값(?)만 들어간다 예제 todoList @emit 상위 컴포넌트에 데이터를 넘겨줄때 유용함 기존 todoList에 Delete 기능을 추가하면서 활용한 예제를 보면 이해가됨 https://github.com/LeeEugene1/vueStudy GitHub - LeeEugene1/vueStudy Contribute to LeeEugene1/vueStudy develo.. Counter 리액트 그냥 심심해서 오랜만에 카운터를 리액트로 구현해보았다. 그때는 useState를 뭘모르고 사용했었는데 엄청 좋은애였구나 너.. 리액트 명함리스트 import React from "react"; export default function Create({ username, onChange, age, onCreate }) { return ( 등록 ); } import React from "react"; function UserMap({ props, onRemove }) { return ( {props.username}:{props.age} onRemove(props.username)}>삭제 ); } export default function BusinessCard({ user, onRemove }) { return ( {user.map((test) => ( ))} ); } import React, { useState } from "react"; imp.. e.target 추가 이벤트중 원하는 데이터만 매개변수로 파라미터로 넘겨주기 api호출함수(){ ... document.querySelector('...').addEventListenr('click', e => test(e, data)) } 여기 한 API를 호출하는 함수가 있다고해보고 실행되면 특정 클레스에 클릭 이벤트를 걸어준다고 가정해보자 클릭 이벤트가 발생되면 e을 넘겨주는데 event에서 원하는 데이터만 뽑아서 사용할 수있다. let itemInfo = {} function test({ target: {dataset}}, data){ //dataset은 e.target.dataset을 의미 itemInfo = data.find(e => e.id === +dataset.id);//338 console.log(it.. [React] 숫자 증가감소 버튼만들기 Counter 최근에 코드대장간 유투브강의로 리액트 공부중 props, state, children, setstate, bind, 함수 등등을 총망라한! Counter라는 숫자 증가감소 버튼을 만들어보자. 나는 추가로 리액트 UI라이브러리인 ant design를 활용해 UI를 이쁘게 꾸며줄예정! import React from 'react'; import './App.css' class App extends React.Component { //state초기화 constructor(props) { super(props); this.state = { value: 10 } //bind의 의미 : 강제로 this는 여기다! this.onClickHandler = this.onClickHandler.bind(this); // .. 이전 1 2 3 4 5 다음
