1) 최상위(Top Level)에서만 hook을 호출해야 한다. 에러1) -> React hook 자체의 규칙 : 화면에 보여주는 부분보다 무조건 위에 있어야 함 => https://ko.legacy.reactjs.org/docs/hooks-rules.html Hook의 규칙 – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 2) React 함수 컴포넌트에서 Hook을 호출해야 한다. 에러2) => 함수형 컴포넌트(components파일 안에서, 대문자로 표기되는 것)가 아닌 곳에서 useEffect를 쓰고 있기 때문에 해당 에러가 나는 것. => 함수형 컴포넌트(components파일) 안으로 useEffect..
아니 대체 몇번을 썼는데 아직도 헷갈리냐.... ㅠ 1. add ------------------------------------------------------------ // initialState는 그림상 생략 -여기서의 payload는 newTodo { } 2. delete ------------------------------------------------------------ //action values는 그림상 생략 // initialState는 그림상 생략 -여기서의 payload는 todo.id (인데 일부러 이름을 abc로 바꿈) 3. update ------------------------------------------------------------ //action values는..
1. yarn add @reduxjs/toolkit 2. configureStore.js 수정 : 기존의 createReducer + combineReducers 2개의 API -> configureStore 하나로 수정 3. modules 파일 수정 -createSlice() 호출 -2개를 export 1) export const { addTodo, removeTodo, switchTodo } = todoSlice.actions -> const 붙여주기 -> action creator들에서 쟤네를 추출한다는 뜻 2) export default todoSlice.reducer *순수 redux와 달리 redux toolkit은, immer 덕분에 1) add return [...state, action...
리액트 앱에서의 연산 최적화: 메모이제이션(Memoization) 기법 사용 -특정 입력에 대한 결과를 계산 -> 메모리 어딘가에 저장 -> 동일한 요청 들어오면, 저장한 결괏값을 빠르게 제공 -동적 프로그래밍 (DP)에서 사용 1. UseMemo -결괏값 기억 -> 필요할 때 사용 -> 불필요한 함수 호출 막아줌 const value = useMemo(() => { return count * count }, [count]) => 콜백함수 () => {}는, [count]의 값이 변하지 않는 한, 다시 호출되지 않음 2. React.memo -컴포넌트가 불필요하게 리랜더링되는 것을 방지 -부모 컴포넌트에서 내려준 props가 변경되지 않는 한, 리랜더링되지 않음 export default React.me..
1.설치 -yarn create react-app 파일명 -절대경로 지정 : [jsconfig.json] { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } -yarn add redux react-redux -yarn add react-router-dom (페이지) -yarn add @reduxjs/toolkit (RTK 쓸 때만) 2.폴더 설정 ❶configStore.js (얘를 해야 index.js에서 store import 가능) import { createStore } from "redux"; import { combineReducers } from "redux"; import { auth } from "redux/modules/aut..
