Today 요약
- 리덕스 강의
- 클래스 컴포넌트 vs 함수 컴포넌트
1. What I Learned?
1.1 리덕스 강의
현재 듣고 있는 강의 인데, Redux와 MobX를 비교해서 쉽게 알려주는 강의다. 아직 MobX랑 리덕스 사가 쪽은 못 들어봤다. 하지만 지금까지 들어본 걸 기준으로 간략하게나마 정리해본다.
리덕스는 기존에 MVC 양방향 패턴의 문제를 해결하기 위해 단반향 패턴인 Flux 패턴을 활용해서 새롭게 페이스북에서 개발한 중앙 집중 상태관리 라이브러리다. 리덕스에서는 state를 직접 변경할 수 없으며, action이라는 객체를 reducer에 전달해서 변경할 수 있다. 이때 reducer에는 이전 상태값도 같이 전달해야 한다. action을 동작하게 하기 위해서는 dispatch라는 함수를 이용해야 한다. 그리고 state가 변경될 때마다 자동으로 새롭게 UI를 그리게 하기 위해서는 subscribe 함수를 이용하면 된다. 이게 가장 간단한 리덕스의 동작 원리다. 리덕스는 순수 자바스크립트에서도 상태관리를 위해 사용이 가능하다. 하지만 보통 리액트에서 많이 사용하는 듯하다. 그래서 리액트에 맞춰서 손쉽게 사용할 수 있는 react-redux라는 tool도 있고, redux-toolkit이라는 tool도 있다. react-redux는 Provider 컴포넌트를 통해 상위 컴포넌트에 스토어를 제공하고, useSelector와 useDispatch 훅을 사용하여 상태와 액션을 처리하는 데 편의성을 제공한다. 그리고 이런 것들을 보다 좀 더 간결하게 정의해서 사용할 수 있는 것이 redux-toolkit이다. 스토어, 액션, 리듀서를 한 번에 정의할 수 있고, 불변성을 유지하는 데 도움을 주며, 비동기 작업을 위한 미들웨어도 내장되어 있다.
그리고 리덕스는 기본적으로 동기적으로 동작한다. 따라서 비동기적인 동작을 하게 하기 위해서는 리덕스 미들웨어가 필요하다. 리덕스 미들웨어는 액션이 dispatch되어 리듀서에 전달되기 전에 실행되는 함수다. 미들웨어는 액션 객체를 가로채서 필요한 비동기 작업을 수행할 수 있다. 주로 thunk나 saga를 이용해야 하는데, thunk는 좀 더 간단한 비동기 코드를 구현할 때 사용하고 saga는 좀 더 복잡한 코드를 다룰 때 사용한다고 한다. saga는 제너레이터와 관련이 있는 것 같은데, 제너레이터 자체를 제대로 모르기도 하고 아직 saga에 대해서는 강의를 들어보지 않았다.
어느 정도 다 비교해보는 게 좋다는 멘토님 피드백이 있었기 때문에 다음 번 멘토링 전까지 saga랑 MobX까지 다 보고 이 기회에 Recoil이나 Zustand도 어느 정도 비교 정리를 해놓으면 좋을 것 같다.
1.2 클래스 컴포넌트 vs 함수 컴포넌트 강의
현재 함수 컴포넌트가 더욱 많이 쓰이고 있지만 클래스 컴포넌트도 그에 못지 않은 것 같다. 실제 내가 취직을 하고 나서도 그 회사에서는 클래스 컴포넌트를 사용하고 있을지도 모른다. 함수 컴포넌트만 써왔기 때문에 명확하게 클래스 컴포넌트와 함수 컴포넌트 중에 무엇이 더 좋다라고 자신있게 이야기 할 수는 없지만 강의를 생활코딩에 비교 영상이 있어 그 부분을 보고 간단하게 핵심이라고 생각하는 부분만 정리해보았다.
함수 컴포넌트와 클래스 컴포넌트를 비교할 때 가장 중요한 부분은 state와 생명주기다. 리액트는 처음부터 둘다 함수 컴포넌트와 클래스 컴포넌트를 모두 사용할 수 있었지만, 버전 16.8부터 Hooks가 도입되면서 기존에 함수 컴포넌트 내부에서 state 관리가 되지 않았고 컴포넌트의 마운트와 언마운트, 업데이트의 생명주기를 관리할 수 없던 부분을 useState로 state관리를 useEffect로 생명주기 관리를 할 수 있다.
useState는 state 관리를 할 수 있는데, useState는 길이가 2인 배열을 반환한다. 배열의 첫번째 인덱스는 현재 state값이고 배열의 마지막 인덱스는 변화시키고 싶은 state값을 set 할 수 있다. 그리고 useState의 인자로 초기값을 전달할 수 있다.
useEffect는 이전에 이야기 했던 대로 생명주기와 관련이 있고, 첫 마운트시에만 동작하게 하려면 의존성 배열에 빈 배열을 전달하고, 특정 변수가 업데이트 될 때마다 동작하게 하려면 의존성 배열에 그 특정 변수를 전달하면 된다. 그리고 컴포넌트가 언마운트 될 때 동작하게 하려면 useEffect 내부 로직에 return 문을 명시해서 그 안에 원하는 동작을 하게 하면 된다.
