프론트엔드 공부/react (31) 썸네일형 리스트형 react 로 날짜피커 만들기 (스크롤) https://www.npmjs.com/package/react-mobile-picker-scroll/v/0.2.12 https://codesandbox.io/s/5wrkm0qqjx?file=/src/index.js https://codesandbox.io/s/my5xvz3869?file=/src/index.js /:id 페이지에서 location.state로 형제컴퍼넌트에 값 넘겨주기(history사용) /:id 인 페이지에 location.state.statekey값 넘겨야 할때 !! (다른페이지에서 최초로 history.push("/subpage/1",{userId:넘겨줄값}) 구현할 페이지에서 넘어온 객체({userId:넘겨줄 값})를 하단과 같이 location 을 활용하여 넘기고 넘겨주면 각페이지에서 적용 가능하며, 마지막 결과 페이지에서 다른 페이지로 값을 넘겨줄수도 있다 ! //useHistory, useLocation import 해주고 [...] const passUserId1 = () => { history.push("/sform/1", 특정값 ); }; const passUserId2 = () => { history.push("/sform/2", location.state); }; c.. history.push(경로,{}) history.push 로 넘어가는 경로 페이지에 오브젝트를 넘겨주고, location을 props 로 받아 쓸수 있음, 단 해당경로페이지 라우팅이 "/페이지/:id"와 같이 파라미터를 받아야하는 페이지.js 인 경우 const userId = location.state.userId로 상위에 정의 내려 버리면 하위에 들어가는 모든 페이지 (ex. '/페이지/1','/페이지/2','/페이지/3'...) 에서 모두 userId를 찾기 때문에 오류 발생하므로 원하는 페이지에 직접 {location.state.userId}로 정의 해주는 것 이좋음. imort {useHistory} from react-router-dom; const App = () =>{ const history = useHistory(); .. redux axios redux thunk 예제 https://github.com/fangmin26/React_Redux_Tutorial/tree/master/src GitHub - fangmin26/React_Redux_Tutorial Contribute to fangmin26/React_Redux_Tutorial development by creating an account on GitHub. github.com folk한 연습용 예제이니 참고만 할것, **redux와 다른 사항 : axios 불러오는 것, composeEnhancers 사용함,(thunk github페이지에 튜토리얼나와있음) chart.js 다중차트 https://natalie-rojas113.medium.com/a-beginners-guide-to-creating-beautiful-charts-using-chart-js-react-e6f2cb47b20b A Beginner’s Guide to Creating Beautiful Charts using Chart.js + React Chart.js is a simple yet powerful tool for data visualization. natalie-rojas113.medium.com [react] label htmlFor React 와 JSX 는 링크와 등을 제외하면 거의 속성 사용이 가능하다. form 속성의 label 속성 활용시 label htmlFor 로 작성한다. [react] 페이지 이동 Redirect /history.push/Link react에서 페이지이동의 기본적인 세가지 방법으로 Redirect,history,Link 가 있다. 세가지 특성이 헷갈려서 간단하게 요약해보았다. 1.history.push -hitory.push(/해당경로)로 사용된다 -현재 url 기록이 이동후도 남는다. -react-router-dom의 useHistory를 import 해온다 - jsx에서 사용할수 없고, 어떤 event 안의 함수에서 활용한다 -하위 컴퍼넌트에 history 사용시 부모의 props 로 전달받아야 하며, 최상위 컴퍼넌트에 BrowserRouter와 Route 사용시 history 객체가 자동 전달된다. *history.replace : 현재의 url 기록이 이동 후 남지 않게 할 때 사용된다.(Redirect 와 비슷) 2.Re.. redux todolist //reducer.js const initialState = { todos: [], }; const reducer = (state = initialState, action) => { switch (action.type) { case "ADD_TODO": return { ...state, todos: [...state.todos, action.payload], }; case "DELETE_TODO": return { ...state, todos: state.todos.filter((todo) => todo.id !== action.payload), }; default: return state; } }; export default reducer; //index.js import React from "reac.. 이전 1 2 3 4 다음