TIL. React. 리액트 기초반. <22.03.25>

오늘 해야 할 일

리덕스 강의부터 끝까지 듣는것 부터

오늘 배운 것

리덕스:

• 전역 상태 저장소 (전역 데이터 저장소)
• 별도의 데이터.
• 자식 -> 부모 방지.

props drilling:

상태관리 흐름:

구독: Store -> Component 연결
디스패치: Component 상태 변화의 Action을 일으킴

상태관리:

• 1. 상태(State)
• 2. 수정: 바꿔주라! -> 바꿔준다 -> 바꿨다고 알려준다.

*Redux 공식 문서 잘 되어 있다. 초반예제, tutorial 정말 훌륭. API 레퍼런스도 훌륭

(1) State : 데이터
(2) Dispatch : state 참조하는(구독) 애들 수정해줘라 요청
(3) Action : 수정할 무언가를 지정
(4) Reducer : 수정을 할 곳
(5) Store : 수정한 State 만드는 역할
(6) ActionCreator: Action을 만드는 역할

리듀서의 순수함수(default function) : 리턴값 동일해야 함. 이전상태 수정x

State= 2;
return 2;

Swtich case : '어떨 때, 뭐를 해'

[[리듀서+리듀서+...] + [devtool] + [미들웨어]] => CreateStore로 넘겨준다. 리듀서 묶은것을 rootReducer 라고 합니다.

BucketList.js에서 사용하는 useSelector의 파라미터 state는 스토어에서 사용하는 전체 데이터를 의미.

Detail.js에 메인페이지 내용 연동을 위한 순서
1. []번째 누름?
2. 누런 것 가져온다.

디테일 페이지에 메인 페이지 내용 가져오기 위해 index는 추가 했고 이제 리덕스 데이터 (bucket_list)를 가져와야 함.

Route 사용법 1: 넘겨줄 props 없을 때

<Route path ="주소" component={컴포넌트명}/>

디테일에 삭제버튼을 만들고 / 액션, 액션 생성 끝내고 / 리듀서 만들어서(다 만드는게 아님. ruturn state만 함.) 다시 디테일로 돌아가 연결한다.

오늘의 키워드

리듀서의 순수함수(default function) : 리턴값 동일해야 함. 이전상태 수정x

상태관리:
1. 상태(State)
2. 수정: 바꿔주라! -> 바꿔준다 -> 바꿨다고 알려준다.