[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 45회차 미션 - 35강 Redux소개, 키워드 숙지

Redux 소개

리액트의 리덕스는 우리가 기존에 배웠던 Context API + useReducer를 사용하는 것과 유사하다. 리덕스는 컴포넌트의 상태관리 로직들을 다른 파일로 분리해서 손쉽게 관리할 수 있게 해주고 글로벌 상태 관리도 편하게 할 수 있다. 예전에는 Context API가 지금과 같이 편리하지 않았기 때문에 많은 사람들이 리액트를 쓰면 당연시 리덕스를 썼는데 요즘에는 Context API가 개선되어서 프로젝트가 크지 않으면 리덕스를 쓰지 않아도 된다고 한다.
그렇다면 리덕스는 Context API에 비해 어떤 장점이 있는 것일까?

1. 미들웨어 : 비동기 작업을 더욱 체계적으로 관리 할 수 있음
2. 특정 조건에 따라 액션이 무시되게 만들 수 있음
3. 액션을 콘솔에 출력, 서버쪽에 로깅 할 수 있음
4. 액션이 디스패치 됐을 때 이를 수정해서 리듀서에게 전달되도록 할 수 있음
5. 특정 액션이 발생했을 때 이에 기반하여 다른 액션이 발생되도록 할 수 있음
6. 특정 액션이 발생했을 때 특정 자바스크립트 함수를 실행시킬 수 있음
7. 유용한 함수와 Hooks 지원

   • connect
   • useSelector
   • useDispatch
   • useStore

8. 기본적인 최적화가 이미 되어있음
9. 하나의 커다란 상태
10. DevTools 존재
11. 이미 사용중인 프로젝트가 많음

프로젝트 규모가 크고 비동기작업을 자주 하게 되는 경우 리덕스를 사용하자. 그리고 리덕스가 편하게 느껴진다면 리덕스 쓰면 된다. 불편하다면 MobX라는 라이브러리도 있으니 참고하자.

Redux에서 사용되는 키워드 숙지하기

1. 액션 Action
   액션객체는 아래와 같이 이루어져 있다.
   
   액션에는 타입이라는 값이 필수적으로 있어야 한다. 나중에 리덕스에서 상태를 업데이트 할땐 이 타입을 보고 어떻게 업데이트 할지 정한다. 그리고 타입 외에도 다른 값을 넣어줄 수도 있다. 다른건 data에다가 넣어서 만들어주면 된다.
   
   위를 예로 들어보면 이 액션은 인풋의 상태를 바꾸는 액션이라는 의미라는걸 타입으로 알 수 있고, 그 안에 텍스트를 ‘안녕하세요’로 넣겠다는 것을 알 수 있다. 업데이트할때 정의하는 객체가 액션이라고 보면 된다.

2. 액션 생성 함수 Action Creator
   말그대로 액션을 만들어주는 함수이다.
   
   예를들어 addTodo라는 함수를 만든다면 data를 받아와서 넣어주는 것이다.
   액션 생성 함수는 화살표함수로도 만들어 줄 수도 있다. 리덕스를 사용할때는 액션 생성 함수를 사용하는 것이 필수적이진 않다.
   다만 액션 생성 함수를 만들고 나면 나중에 좀 더 편하게 액션객체를 만들 수 있다는 걸 알아두자.
   만약 액션 생성 함수를 안쓰면 액션을 발생시킬때마다 직접 액션객체를 작성해주면 된다.

3. 리듀서 Reducer
   변화를 일으키는 함수이다. 리듀서는 두가지 함수를 가진다. state와 action이다.
   리듀서 함수에서 하는 일은 액션타입을 가지고 액션타입이 무엇이냐에 따라서 다른 업데이트 작업을 한다. 지금은 단순히 숫자에 더하고 빼고 하는 작업을 했지만 리듀서에서는 불변성을 꼭 유지해줘야 한다. 만약 이 state가 객체이거나 배열이거나 문자면 꼭 스프레드 연산자를 활용해서 기존에 있는 객체나 배열을 건드리지 않고 새로운 객체나 배열을 만들어서 반환해줘야 한다는 것 알아두자!
   리덕스의 리듀서에서는 기본적으로 default에서 return state를 반환한다.
   

4. 스토어 Store 리듀서를 사용하게되면 한 애플리케이션 당 하나의 스토어를 만들게 된다.
   스토어 안에는 현재앱의 상태와 리듀서가 들어있고 추가적으로 몇가지 내장함수가 들어있다.

   • 디스패치 dispatch : 액션을 발생시키는 것, 액션을 스토어한테 전달한다. 액션 객체를 만들어서 dispatch를 파라미터로 넣어서 호출을 해준다. 그렇게 호출을 하고 나면 해당 액션이 리듀서에게 전달이되서 리듀서 함수에서 새로운 상태를 반환해주면 스토어의 상태가 새로워지는 것이다.
     dispatch({type: ‘INCREASE’})
   • 구독 subscribe : 구독을 호출할때 파라미터로 특정 함수를 넣어주면 액션이 디스패치 될때마다 우리가 설정한 함수가 호출된다. 스토어의 상태가 업데이트 될때마다 특정 함수를 호출할 수 있게 된다. 리액트에서 리덕스를 사용하게 될때 보통 이 함수를 직접 사용하게 되는 일은 없다. 그 대신에 connect 함수 혹은 useSelector 훅을 사용해서 만약에 스토어에 있는 상태가 업데이트 되면 컴포넌트가 리랜더링 되게 하는 작업을 대신 처리해준다. 컴포넌트가 리덕스에 구독을 하게 된다. 리덕스 상태가 업데이트 되면 컴포넌트도 업데이트 되는 것이다.

리덕스의 3가지 규칙

1. 하나의 애플리케이션엔 하나의 스토어가 있다. (스토어는 한개만!!)
2. 상태는 읽기 전용이다. (즉 불변성을 지켜줘야 한다!!)

   • 객체 - 스프레드 연산자
   • 배열 - map, concat, filter, slice 등을 사용

3. 변화를 일으키는 함수 리듀서는 순수한 함수()여야 한다.
4. 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다.
5. 이전의 상태는 절대로 변경하지 않고, 변화를 일으킨 새로운 상태 객체를 만들어서 반환한다.
6. 똑같은 파라미더로 호출된 리듀서 함수는 언제나 똑같은 결과값을 반환해야만 한다. : 동일한 인풋 -> 동일한 아웃풋
7. 아래 세가지는 리덕스안에서 쓸 수 없다.

new Date()
Math.random()
axios.get()

해당작업은 미들웨어에서 처리하거나 컴포넌트 내에서 처리해야한다. 역시나 자세하고 정확한 내용은 벨로퍼트의 위키를 참고하도록 하자.

오늘은 여기까지..
시청 영상 35강 01~03까지

프론트엔드 개발 올인원 패키지 with React Online. 👉 https://bit.ly/31Cf1hp