오늘배운것

• redux
• 리덕스 프로젝트폴더 생성하기
  npx create-react-app redux-start dirname
  npm i redux

State의 특징

• 1.자식컴포넌트 또는 형제컴포넌트 사이의 상태 이동은
  부모컴포넌트 --> 형제컴포넌트의 형태가 디폴트값이다.

• 2.state의 전달은 컴포넌트간 긴밀이 연결되어있다.

• 3.형제컴포넌트이 동일한 상태를 공유한다면, 상위컴포넌트에 상태가 위치해야한다.
  (따라서, 최상위 컴포넌트에 수많은 상태가 존재하게 될 가능성 높음 : 적절하지 못함)

Redux?

• 예측가능한 상태관리를 해주는 container for 자바스크립트앱
• 위에 작성된 상태의특징으로 일어나는 상태의 복잡성을 단순하게 해결해준다.
• store 라는 공간을 마련하여 컴포넌트 외부에 상태를 위치시킨다.
• 유지보수를 용이하게 해준다. (action과 state log 기록으로 추적용이)

Redux의 3가지 원칙

• single source of truth
  ==> 동일한 데이터는 항상 같은곳에서 데이터를 가져온다.
• state is read-only
  ==>  수정이 필요한경우 : 리액트 : setState, 리덕스 : action객체 를 사용
• 변경은 순수함수로만 가능함 (feat. reducer)

Store & Action & Reducer & dispatch

• STORE

상태가 관리되는 유일한 공간 ! 
컴포넌트는 state에 접근해서 필요한 data를 가지고 오게됨 

• ACTION

1. store에 data를 운반해준다. 
2. `type`은 필수로 가진다.

• REDUCER

1. current state와 action을 이용하여 new state를 생성하는 부분
2. action이  store에 data 전달할때 꼭 거쳐야 하는 곳.
3. 정교한 과정은 아래와 같아( dispatch가 추가됨) 
   -액션객체를 dispatch에 전달 
   -dispatch가 reducer를 호출한다. 
   -새로운 state 생성! 

• STATE의 이동과정

1. 브라우저에서 이벤트가 발생한다.
2. dispatch의 전달인자로 action 객체를 담아서
3. reducer 로 전달한다. 
4. reducerㅇ는 action객체의 타입에 따라 특정행동을 수행
5. new state를 반환한다. 

포인트

• state관리가 필요한 상황인지 먼저 파악할것.