일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- async/await
- TS
- 반공변성
- map
- Promise
- tailwind
- dfs
- Cypress
- webpack
- autosize
- 무한 스크롤
- 호이스팅
- 이분 검색
- SSR
- ESlint
- Jest
- 인터섹션
- CORS
- 공변성
- RTK Query
- 리터럴 타입
- app router
- CI/CD
- 투포인터
- React
- recoil
- 태그된 유니온
- 결정 알고리즘
- useAppDispatch
- 타입 좁히기
- Today
- Total
목록인프런, 유데미 (97)
짧은코딩
combineReducers combineReducers는 Reducer들을 모두 합쳐주는 것이다. 이것이 중요한 이유는 store에서 reducer를 단 1개만 받을 수 있기 때문이다. 따라서 combineReducers에서 Reducer들을 모두 합쳐주고 store에서 모두 합쳐진 reducer를 사용하면 된다. 사용 방법 reducers/index.ts import { combineReducers } from '@reduxjs/toolkit'; import { testSlice } from './TestSlice'; import { roadMapSlice } from './RoadMapSlice'; const reducer = combineReducers({ test: testSlice.reduce..
CRA로 RTK도 같이 설치하기 npx create-react-app my-app --template redux-typescript 이 명령어를 입력하면 리액트 폴더를 만들 때 Redux-ToolKit도 같이 설치하게 된다. 설치된 초기 코드 https://github.com/5hyun/redux_study/tree/main/RTK GitHub - 5hyun/redux_study Contribute to 5hyun/redux_study development by creating an account on GitHub. github.com 코드를 보기 위해서는 위 깃허브를 참고하면 된다. 중요하게 볼 폴더 app과 features 폴더를 참고하면 리덕스 툴킷 공부에 도움이 될것이다. -app app에는 da..
리렌더링 리엑트에서 리렌더링이 되면 return 밑 부분을 처음부터 실행하지만 바뀐 부분만 다시 그리게 된다.(return 부분이 virtual dom이다.) 만약 리렌더링 되었을 때, 모든 화면을 다시 그려준다면 개발자들이 리엑트를 사용하지 않을 것이다. 번외로 useCallback은 함수를 캐싱하는 것이고 useMemo는 결과를 캐싱하는 것이다. 인라인 스타일 코딩을 하다보면 인라인 스타일을 많이 쓰게 된다. 이런 방식은 지양하는 것이 좋다. 왜냐하면 객체는 "{} === {}"을 하면 false가 나온다. 그렇기 때문에 리렌더링하면 인라인 스타일 부분을 사용한 곳을 다시 그리게 된다. 해결법으로는 styled-components, emotion.js 등 같은 js-in-css를 사용하면 된다. an..
ant Design -공식 사이트 https://ant.design/ Ant Design - The world's second most popular React UI framework Ant Design 5.0 Ant Design 5.0 use CSS-in-JS technology to provide dynamic & mix theme ability. And which use component level CSS-in-JS solution get your application a better performance. ant.design 이 사이트에는 버튼, 메뉴 스타일 등의 css가 있다. 장점으로는 디자이너가 없을 때, 디자인 고민 할 시간을 덜어줄 수 있다. 단점으로는 페이지가 다른 사이트와 겹치는 스타..
redux-toolkit redux-toolkit에는 immer, thunk, redux 등 개발자들이 많이 사용하는 라이브러리가 기본적으로 내장되어있다. -공식 사이트 https://redux-toolkit.js.org/introduction/getting-started Getting Started | Redux Toolkit redux-toolkit.js.org 제로초님은 공식 사이트에서 createSlice, createAsyncThunk를 읽어보는 것을 강력 추천한다고 한다. 왜냐하면 저 2개가 실무에서 가장 많이 사용되기 때문이다. 사용하기 -store.js const { configureStore } = require("@reduxjs/toolkit"); const reducer = requi..
불변성 유지 리덕스에서는 불변성을 유지하기 위해서 initialState.data = null; initialState.deep.deeper.deepest.a = 'b'; 이렇게만 바꿔도 되는 코드를 return { ...prevState, data: null, deep: { ...prevState.deep, deeper: { ...prevState.deeper, deepest: { ...prevState.deepest, a: 'b', } } } } 이렇게 복잡하게 바꿔줘야한다. 코딩하는 양도 많아지고 직관적이지 못하다. 이것을 편안하게 해주는 것이 immer라는 라이브러리이다. immer reducer는 action을 바탕으로 다음 state를 만들어내는 것이다. 그렇기에 reducer는 (이전 sta..
폴더 구조 https://shortcoding.tistory.com/396 redux-thunk 간단한 것은 thunk로 구현할 수 있지만 복잡한 것은 saga로 구현하는 것이 좋다. thunkMiddleware // thunkMiddleware는 아래 코드가 끝이라서 불러올 가치가 없다 // 기본적으로 action은 객체 const thunkMiddleware shortcoding.tistory.com 이 글에서 만들었던 actions와 reducers를 가져와서 사용했다. 다른 점이 있다면 index.js 파일은 store.js로 바꾸고 module로 바꿨다. client.jsx import React from 'react'; import ReactDOM from 'react-dom'; import ..
간단한 것은 thunk로 구현할 수 있지만 복잡한 것은 saga로 구현하는 것이 좋다. thunkMiddleware // thunkMiddleware는 아래 코드가 끝이라서 불러올 가치가 없다 // 기본적으로 action은 객체 const thunkMiddleware = (store) => (next) => (action) => { //비동기는 함수로 넣어주겠다는 약속 if (typeof action === "function") { return action(store.dispatch, store.getStats); } // 동기 return next(action); }; thunkMiddleware을 만들고 enhancer에 넣어준다. 동기는 기본적으로 객체로 받고, 비동기는 함수로 받는 것이 약속이다...
리덕스 미들웨어 action은 기본적으로 동기이다. action이 객체고 dispatch는 그냥 객체를 받아서 dispatch하는 역할이기 때문에 그 사이에 비동기가 들어갈 틈이 없다. 비동기를 하기 위해서는 미들웨어를 사용해야 한다. dispatch와 reducer 사이에 동작하는게 미들웨어이다. 리덕스 미들웨어로는 redux-thunk, redux-saga를 가장 많이 사용한다. 무조건 비동기를 위해서만 미들웨어를 사용하지는 않는다. 예를 들어 미들웨어에서 로깅도 할 수 있다. const store = createStore(reducer, initialState, enhancer); 위 매개변수의 순서가 정해져있다. enhancer가 store를 "덧붙이거나 증강시킨다"라는 의미이다. 따라서 enha..
원본 파일 const { createStore } = require("redux"); const reducer = (prevState, action) => { switch (action.type) { case "LOG_IN": return { ...prevState, user: action.data, }; case "LOG_OUT": return { ...prevState, user: null, }; case "ADD_POST": return { ...prevState, posts: [...prevState.posts, action.data], }; default: return prevState; } }; const initialState = { user: { isLoggingIn: true, data:..