프론트엔드 정복하기

action.js 에서 const request = axios.get('url').then(res=>res.data) return { type: CHILD_TEAM_DATA_REQ, payload: request }; 위와 같이 서버통신 응답 값을 reducer로 넘기면, ===>>> reducer에서 console.log(action.payload) 하면 ===> 아래와 같이 서버에서 받은 data가 바로 찍히는 데, const request = axios.get('url').then(res=>res.data) return { type: CHILD_TEAM_DATA_REQ, payload: request, expandeTeam : ..., teamId : .... }; 위처럼 리듀서에 넘길 key를 p..

import React, { useState, useEffect } from "react"; export default function App(){ const [checkedInputs, setCheckedInputs] = useState([]); const changeHandler = (checked, id) => { if (checked) { setCheckedInputs([...checkedInputs, id]); } else { // 체크 해제 setCheckedInputs(checkedInputs.filter((el) => el !== id)); } }; return ( { changeHandler(e.currentTarget.checked, id값) }} checked={checkedInput..

이벤트 분류 React가 지원하는 이벤트 마우스 이벤트 onClick, onContentMenu, onDoubleClick, onDrag, onDragEnd, onDragEnter, onDragExit, onDragLeave, onDragOver, onDragStart, onDrop, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp 키보드 이벤트 onKeyDown, onKeyPress, onKeyup 클립보드 이벤트 onCopy, onCut, onPaste 폼 이벤트 onChange, onInpute, onSubmit, onTnvalid 포커스 이벤트 onFocus, onBlur 터치 이벤트 o..

React hooks로 탭 기능을 어떻게 구현할까. 아래 그림처럼 상단에 탭타이틀이 있고, 하단에 탭 콘텐츠가 있으며, 각 탭 타이틀을 클릭할 경우 해당 컨텐츠가 보이도록 할 것이다. 1 ) 탭타이틀을 클릭하면 해당 타이틀에 'is-active'라는 class를 부여해서 포커싱된 탭에 맞는 스타일을 부여할 것이고, 2 ) 각 탭을 클릭하면 해당하는 콘텐츠만 화면에 보여지도록 할 것이다. 먼저 (1) 탭 Title, (2) 탭 Content를 담은 배열을 선언한다. const tabContArr=[ { tabTitle:( 탭1 ), tabCont:( 탭1 내용 ) }, { tabTitle:( 탭2 ), tabCont:( 탭2 내용 ) } ]; return되는 템플릿에 map 함수를 사용해서 각 obj의 탭..

1. keepAlive 2. react-router-cache-router 3. axios-extensions dohoons.com/blog/1810/

Redux 상태관리 툴에 불편한 점이 있다. 바로 리덕스 상태 앱을 종료하거나 브라우저를 새로 고침하면 저장돼 있던 state들이 모두 reset된다는 것이다. 여기에 아주 편리한 Redux 라이브러리가 있다. Redux-Persist는 state을 LocalStorage나 Session에 저장함으로써 새로고침함에도 state 저장 상태를 유지시킨다. Redux-Persist 설치 및 사용 예시를 살펴보자. 1. 설치 npm install --save redux-persist 2. 사용 예시 //reducers/index.js // reducers/index.js import { combineReducers } from "redux"; ➊ import { persistReducer } from "redu..