Redux
; JS 앱을 위한 예측 가능한 상태 컨테이너
- 일관적으로 동작하고, 서로 다른 환경(서버, 클라이언트, 네이티브)에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도움
- 시간여행형 디버거와 결합된 실시간 코드 수정과 같은 훌륭한 개발자 경험을 제공
React Redux 앱만들기
$ npx create-react-app my-app --template redux
Redux 코어 라이브러리 다운로드
$ npm install redux
Redux Toolkit 다운로드
$ npm install @reduxjs/toolkit
action의 reducer
; action을 주면, 그 action이 적용되어 달라진 결과를 만들어 줌
function reducer(previousState,action){
return newState;
}
- action을 받아서 state를 리턴하는 구조
- 인자로 들어오는 previosState와 return하는 newState는 다른 참조를 가지도록 해야함
store를 만드는 함수
const store = createStore(리듀서);
'WebProgramming > React' 카테고리의 다른 글
[React] 한 페이지 정리 (0) | 2022.07.17 |
---|---|
[React] Component로 css요소 복사하기 (0) | 2022.07.17 |
[React] 웹사이트 배포하기 (0) | 2022.07.13 |
[React] Reducer를 통해 state 관리하기 (0) | 2022.07.12 |
[React] useContext를 이용해 전역 props전달하기 (0) | 2022.07.09 |
[React] useParams를 이용해 파라미터 가져오기 (0) | 2022.07.09 |
[React] 자식 Component에서 부모 Componet로 값 변경하여 전달하기 (0) | 2022.07.09 |
[React] 저장된 이미지들을 한번에 나열(보간법 사용) (0) | 2022.07.09 |
Redux
; JS 앱을 위한 예측 가능한 상태 컨테이너
- 일관적으로 동작하고, 서로 다른 환경(서버, 클라이언트, 네이티브)에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도움
- 시간여행형 디버거와 결합된 실시간 코드 수정과 같은 훌륭한 개발자 경험을 제공
React Redux 앱만들기
$ npx create-react-app my-app --template redux
Redux 코어 라이브러리 다운로드
$ npm install redux
Redux Toolkit 다운로드
$ npm install @reduxjs/toolkit
action의 reducer
; action을 주면, 그 action이 적용되어 달라진 결과를 만들어 줌
function reducer(previousState,action){
return newState;
}
- action을 받아서 state를 리턴하는 구조
- 인자로 들어오는 previosState와 return하는 newState는 다른 참조를 가지도록 해야함
store를 만드는 함수
const store = createStore(리듀서);
'WebProgramming > React' 카테고리의 다른 글
[React] 한 페이지 정리 (0) | 2022.07.17 |
---|---|
[React] Component로 css요소 복사하기 (0) | 2022.07.17 |
[React] 웹사이트 배포하기 (0) | 2022.07.13 |
[React] Reducer를 통해 state 관리하기 (0) | 2022.07.12 |
[React] useContext를 이용해 전역 props전달하기 (0) | 2022.07.09 |
[React] useParams를 이용해 파라미터 가져오기 (0) | 2022.07.09 |
[React] 자식 Component에서 부모 Componet로 값 변경하여 전달하기 (0) | 2022.07.09 |
[React] 저장된 이미지들을 한번에 나열(보간법 사용) (0) | 2022.07.09 |