뷰 먼저 추가 [Detail.js] [bucket.js] 액션추가 액션 생성 함수 추가 리듀서 추가 디테일.js로가서 dispatch를 사용해 연결해준다. [Detail.js] import 해준다. 변수선언 온클릭에 연결 추가기능으로 삭제 후 자동으로 뒤로가기 먼저 히스토리를 가지고있는지 console을 찍어 확인한다. 가지고있음 history.goBack또는 push로 돌아가준다.

- 클래스형 컴포넌트에서 리덕스 데이터 사용하기 1. 리덕스 모듈과 connect함수를 불러온다. [App.js] import {connect} from "react-redux"; 2. 상태값을 가져오는 함수와 액션 생성 함수를 부르는 함수를 만들어준다. (=디스패치) connect하기위해선 두개의 함수 필요 load와 create import load, create둘다 가져왔으니 연결 3. connect로 컴포넌트와 스토어를 엮어준다. 4. 콘솔에 this.props를 찍어본다.. (스토어에 있는 값이 잘 나왔는지 확인) 5. this.state에 있는 list를 지우고 스토어에 있는 값으로 변경 this.state.bucket_list -> this.props.bucket_list로 변경해주었다. 6..

데이터 리스트불러오고 기존 데이터 리스트에 새로운 데이터 추가하여 새 배열로 바꿔주기 덕스구조로 해봄 src폴더안에 redux폴더 그리고 redux의 하위폴더로 modules도 만들어준다. Action, initial state, action creator, reducer를 포함한 리듀서 모듈 생성 그 후 스토어 생성 1. 액션과 initial state만들기 (코딩룰: 액션은 전부 대문자) 2. 액션 생성함수 생성 타입을 넣고 어떤 데이터를 받을건지 여기선 bucket이라는 text를 받을것임 3. 리듀서 생성 4. 스토어 생성 src폴더에 configStore.js파일 생성 5. 리덕스와 컴포넌트 연결하기 [index.js] import {Provider} from "react-redux"; impo..

컴포넌트의 데이터 관리를 위한 리덕스 패키지 설치 yarn add redux react-redux 공식문서 전역 상태관리 = 부모와 자식과 동떨어진 곳인 한군데에 데이터를 넣어두겠다. = 전역으로 저장해둔 데이터 모음들을 아무데서나 참조하겠다. - State 전역으로 저장하고있는 데이터 딕셔너리 형태({[key]: value})로 보관 - Action 데이터에 변경이 필요할때 발생시키는 것(예: 좋아요 눌렸을때 파란불 들어오게) 객체, {type: 'CHANGE_STATE', data: {...}} - ActionCreator (=액션 생성 함수) const changeState = (new_data) > { return { type: 'CHANGE_STATE', data: new_data } } 액션을..

1. NotFound.js컴포넌트 생성 2. App.js에서 import하고 Switch기능 사용하기 3. Route를 Switch로 감싸기 4. Switch 안에 path가 지정되지않은 페이지를 연결해주면 된다. 이제 뒤로가기 버튼 추가해보기 (사실 라우터엔 원래 히스토리가 자동적으로 들어가있음 하지만 추가 공부차원) App.js NotFound.js