22.02.18 TIL

Redux

-많은 컴포넌트 사이에서 프롭스를 내려주기 간편하다.

-스테이트를 한군데에서 관리하니 에러 핸들링이 쉽다.

-Action: 어떤액션을 취할지 정의해놓은 객체

-Reducer: 현재의 state와 Action을 이용해서 새로운 state를 만들어 내는 pure function

-Store: state가 관리되는 오직 하나뿐인 저장소

-동일한 데이터는 같은곳에서 가져온다.

-상태는 읽기 전용으로 두고, action객체로만 변경한다.

-reducer 변경은 순수함수로만 한다.

-Presentation component: 오직 뷰만을 담당하는 컴포넌트(스타일을 가지고 있고, 스토어 접근 권한이 없고, props로만 데이터를 가져온다.state를 가지고있는 경우엔 보통 ui에 관련된 것이어야한다.)

-Container component: 스타일이 없으며, 프레젠테이션 컴포넌트와 컨테이너 컴포넌트를 관리하는것을 담당한다.(리덕스에 직접접근하는 컴포넌트)

이구조로 작성하게 되면 프로젝트를 이해하기 쉬워지고, 컴포넌트의 재사용률도 올라간다.

useSelector()는 컴포넌트와 state를 연결하는 역할을 합니다. 컴포넌트에서 useSelector 메서드를 통해 store의 state에 접근

useDispatch()는 Action 객체를 Reducer로 전달해 주는 메서드.Action은 클릭 등의 이벤트가 일어나는 컴포넌트에 있다.

-쉽지 않지만 가능하다... ㅠ

-버튼이 클릭되면,

1.이벤트 핸들러가 불려지면 Dispatch에 action객체가 전달되고,

2. 액션은 reducer를 호출해서 reducer는 액션의 타입값과 같은 부분을 찾아 실행(순수함수로)하여 store의 state를 갱신한다.

props 구덩이에서 누가 손내밀길래 봤더니 리덕스였다.

하지만 호락호락 하지않은 착한친구.

오늘은 여기까지~