immer

[프론트엔드] 리덕스를 사용하여 리액트 어플리케이션 상태 관리하기[9]

1. Hooks를 사용하여 컨테이너 컴포넌트 만들기 리덕스 스토어와 연동된 컨테이너 컴포넌트를 만들 떄 connect 함수 대신 react-redux에서 제공하는 Hooks를 사용할 수도 있습니다. 1.1 useSelector로 상태 조회 useSelector Hook를 사용할 경우 connect 함수를 사용하지 않고 리덕스의 상태를 조회할 수 있습니다. useSelector 사용법은 아래와 같습니다. const result = useSelector(상태 선택 함수); 여기서 싱태 선택함수란 mapStateToProps와 형태가 동일합니다. 이번에는 CounterContainer에 connect를 들여내고 useSelector Hooks를 사용하여 counter.number 값을 조회하도록 변경해 보겠습..

[프론트엔드] 리덕스를 사용하여 리액트 어플리케이션 상태 관리하기[8]

1. 리덕스를 더 편하게 사용하는 방법 액션 생성 함수,리듀서 작성 시에 사용한 react-actions 라이브러리와 Immer 라이브러리 이렇게 3가지를 사용하면 리덕스를 훨신 편하게 사용할 수 있습니다. 1.1 redux-actions redux-actions 라는 라이브러리를 사용하면 액션 생성 함수를 더 짧은 코드로 작성할 수 있습니다. 그리고 리듀서를 작성할 떄 switch/case 문이 아닌 handleActions 라는 함수를 사용하여 각 액션을 업데이트 하도록 함수를 작성할 수 있습니다. yarn add redux-actions 먼저 위의 명령어로 라이브러리를 추가 설치합니다. 1.2 counter 모듈 적용하기 counter 모듈에 작성했던 액션 생성함수를 createAction이란 함수..