redux
상태관리 라이브러리
데이터를 관리해주는 tool
props
property의 줄임말.
부모component 안에 자식component가 존재 할 경우가 있다. component간에 무언갈 주고받을 땐 prop이용해야한다. prop소통하는 방법은 무조건 위에서 아래로만 가능하다. (부모에서 -> 자식으로)
부모가 자식에게 1이라는 value를 줬다면, 자식에서 props가 변할 수 없다. 1을 바꾸려면 부모에서 바꾼 후 다시 내려줘야한다.
state
component 안에서 데이터를 교환하거나 전달 할 때 사용된다.
부모 자식 상관없이 안에서도 값을 변경가능하다.
예를들어) 값이 2에서 3으로 변하면 re-rendering 되는 성격도 가지고있다.
리덕스를 사용하지 않으면 ..
가장 상위component에서 comment의 정보를 다 보관하고있다. comment의 정보를 한 component에서만 관리하는것이 아니라, 자식 component에서도 관리하고 또 그 자식 component에서도 관리한다. 모든 comment의 state는 최상위 컴포넌트에서 관리하는중이다.
문제점 - comment가 늘었든 줄었든 무슨일이 일어났는지 최상위컴포넌트에게 알려줘야하는데, 하나하나의 부모부터 타고 최상위 컴포넌트까지 올라갔다가 다시 타고 내려줘야 한다는 번거로움이 있다.
redux 사용 장점 -
redux store에 저장해두면, 굳이 부모부터 타고 올라가지 않아도 되고 직접접근이 가능하기 때문에 state관리가 훨씬 편해진다.
redux data flow
한방향으로만 움직인다.
dispatch를 하면 ACTION으로가고
ACTION -> RFEDUCER -> STORE -> React Component
-
ACTION :
객체로 구성 되어있음.
무엇이 일어났는지 설명하는 객체이다.
ex )
{type: 'LIKE_ARTICLE', article: 42}-- article id 42번을 좋아요 했다
{type: 'FETCH_USER_SUCCESS', response: {id:3, name:'Mary'}}
-- 이름이 Mary이고 아이디가 3번인 유저 정보 가져오는데 성공했다
라고 객체형식으로 설명해주는 역할을 한다. -
RFEDUCER :
state가 2->3, 3->4 처럼 변할 수 있는데 액션 함으로 인해서 3이었던 state가 액션 통해서 4로 변했다 이러한 과정을 설명해준다.
(previousState, action) => nextstate
-- 이전 State와 action object 받은 후, next state를 return한다.
reducer은 pure function이기 때문에 reducer 내부에서는 하지 말아야한다. -
STORE : 어플리케이션에 state을 전체적으로 감싸는 역할.
스토어안에 내장되어있는 메소드들이 있는데 이것들을 이용해서 state관리 가능하다.
리덕스 설치하는법 :
npm install redux react-redux redux-promise redux-thunk
해서 한번에 다운
redux-promise, redux-thunk :
redux를 잘 쓸 수 있게 도와주는 역할을한다.
redux는 redux store가있다. store안에서 모든 state를 관리하는데 store의 state를 변경하려면
디스패치를 이용해서 액션으로 변경을 해야한다. 액션을 '객체'형식으로 보내야 스토어가 받을 수 있는데, 스토어에서 언제나 객체형식으로 된 액션을 받는게 아니고 promise형식이나 function형태로 받을때도 있다. redux-thunk는 디스패치한테 어떻게 function을 받을지 알려주고 redux-promise는 function가 왔을때 어떻게 대처 해야하는지 알려주는 역할을한다.
구글에 redux extension 검색하면 redux dev tool 눌러서 리덕스 사용이 편리하게 해준다.
combineReducers :
스토어가안에 reducer가 여러가지 존재하는 경우
-- reducer안에서 하는일 : state가 어떻게 변하는지 보여준다음에 변한 값을 return해주는일을 한다.
reducer가 state가 여러가지에 관한게 있을수 있어서 reducer가 다 나눠서 있는데, 리덕스에서 가져온 컴바인리듀서를 이용하면면 나뉘어져 있는 리듀서들을 루트 리듀서에서 하나로 합쳐준다.
예를들어) 로그인기능 유저기능 등 여러가지 있으면 합쳐준다.
