리액트13 Redux 리덕스 모듈스 import { v4 as uuidv4 } from "uuid"; 액션아이템을 만들어 준다 휴먼에러를 방지라기 위해 상수 처리하여서 액션을 만들어준다 const ADD_TODO = "ADD_TODO"; const REMOVE_TODO = "REMOVE_TODO"; const SWITCH_TODO = "SWITCH_TODO"; export const addTodo = (payload) => { return { type: ADD_TODO, payload, }; }; export const removeTodo = (payload) => { return { type: REMOVE_TODO, payload, }; }; export const switchTodo = (payload) => { retu.. 2023. 1. 3. Redux Toolkit 리덕스 리액트리덕스 리덕스툴킷 리덕스 툴킷이 주장하는 등장이유 1.설정이 많다 2.미들웨어 설치 해야해서 힘들다 3.반복되는 코드가 많다. 4.불변성 유지의 어려움이 있다. 작은 스토어를 슬라이라고 부른다 작은 스토어들을 합쳐서 리덕스들이 요구하는 큰 스토어로 리덕스 툴킷이 만들어 줄거다 작은슬라이스 카운터를 만든다 각각의 기능별로 슬라이스를 만들어서 하나의 스토어로 만들면 된다. createSlice() 를 이용하여 Reducer,actionValue ActionCreator 를 한번에 구현할수있다 Ex) const counterSlice = createSlice({ name: 'counter', initialState, reducer: { addNumber: ( state, action) => { s.. 2022. 12. 24. styled component styled-components 패키지에서 styled 함수를 임포트 한다 styled는 Styled Components의 근간이 되는 가장 중요한 녀석인데요. HTML 엘리먼트나 React 컴포넌트에 원하는 스타일을 적용하기 위해서 사용된다. 기본 문법은 HTML 엘리먼트나 React 컴포넌트 중 어떤 것을 스타일링 하느냐에 따라 살짝 다르다. export const StyledSaveDuckHome = styled.div` border-bottom: 2px solid black; padding-bottom: 10px; display: flex; align-items: center; justify-content: space-between; padding-top: 10px; padding-left: 10.. 2022. 12. 23. 리덕스 투두리스트 리덕스 액션을 만들고 리듀서를 정의한다. export default todos; 를 통해 만든 리듀서를 내보내고, configStore에 연결시킨다. configStore는 여러 state가 모여있는 저장소라고? 보면된다. const rootReucer = combineReducers({ todos, }); 를 통해 todos를 연결한다 todos 는 방금 만든 state집합 ============================================= import { v4 as uuid } from "uuid"; const ADD_TODO = "ADD_TODO"; const REMOVE_TODO = "REMOVE_TODO"; const SWITCH_TODO = "SWITCH_TODO"; .. 2022. 12. 21. 이전 1 2 3 4 다음