본문 바로가기

전체 글64

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.
리덕스 리덕스 리덕스 세팅 npm install redux react-redux redux 폴더 만들고 redux폴던안에 config폴더랑 modules 폴더 만들기 , 폴더를 만들었으면 config 안에 configStore.js 만들고 modules 안에 우리가 사용할 state 들을 작성한다 . configStore는 state들을 컴포넌트에 연결시켜주는 역할을 한다 . 3.configStore 초기세팅 -creatStore() 만들기 const store = createStore(rootReducer); -리듀서 만들기 const rootReducer = combineReducers({ //이곳은 state 들을 연결시켜주는 곳 입니다. // ex) counter , accout }); 만든 리듀서를 c.. 2022. 12. 20.

티스토리툴바