리액트 없이 쓰는 리덕스

React without Redux

리덕스는 리액트에 종속되는 라이브러리는 아닙니다. 만든 목적은 리액트에서의 사용이지만 다른 UI 라이브러리/프레임워크와 함께 사용할 수있고 Vue에서는 리덕스와 유사한 vuex를 주로 사용합니다. 리덕스는 바닐라 자바스크립트와 함께 사용할 수도 있습니다.

Parcel로 프로젝트 만들어보기

npm i parcel-bundler

위의 명령어를 통해 parcel-bundler를 설치합니다.

그 후에 프로젝트 디렉터리 생성후 npm init 명령어를 사용해 package.json 파일을 생성해줍니다.

이렇게 디렉터리를 구성하고 index.js에 콘솔을 찍어 정상 동작하는지 확인합니다.

parcel index.html

위의 명령어를 입력해 개발용 서버를 실행해줍니다.

위와 같이 정상 실행되면 성공이고 이 다음 npm i redux 명령어를 통해 리덕스 모듈을 설치합니다.

간단한 UI 구성하기

스타일 부분을 위와 같이 작성해 줍니다.


위와 같이 UI를 간단하게 구성합니다.

DOM 레퍼런스 만들기

이 프로젝트에서는 UI 관리를 별도의 라이브러리를 사용하지 않기 때문에 DOM을 직접 수정해야 합니다.
JS 파일 상단에 수정할 DOM을 가리키는 값을 미리 선언 해줍니다.

액션 타입과 액션 함수 정의

액션은 프로젝트의 상태에 변화를 일으키는 것입니다. 먼저 액션의 이름을 정의하고, 액션이름은 문자열의 형태이고, 주로 대문자로 작성하며 액션 이름은 고유해야합니다. 이름이 중복되면 의도하지 않은 결과가 발생할 수 있습니다.

다음으로 해당 액션 이름을 사용하여 액션 객체를 만드는 액션 생성 함수를 작성합니다. 액션 객체는 type 값을 반드시 갖고 있어야 하며, 그 외의 추후 상태를 업데이트할 때 참고하고 싶은 값은 마음대로 넣을 수 있습니다.

초깃값 설정

이 프로젝트에서 사용할 초깃값을 정의해 주어야합니다. 초깃값의 형태는 자유이고, 숫자, 문자열, 객체 어느 것이든 상관 없습니다.

리듀서 함수 정의

리듀서는 변화를 일으키는 함수입니다. 함수의 파라미터로는 state와 action 값을 받아 옵니다.

리듀서 함수가 초기 호출시에는 state값이 undefined입니다. 해당 값이 undefined로 주어졌을때는 initialState를 기본값으로 설정하기 위해 함수의 파라미터 쪽에 기본값으로 설정되어 있습니다.

리듀서에서는 상태의 불변성을 유지하며 데이터에 변화를 일으켜야 합니다. 이 작업을 할떄 spread 연산자(...)를 사용하면 편합니다. 다만 객체의 구조가 복잡해지면 spread 연산자로 불변성을 관리하며 업데이트 하는 것이 굉장히 번거롭고 코드의 가독성도 나빠지기 때문에 리덕스의 상태는 최대한 깊지 않은 구조로 진행합니다.

객체의 구조가 복잡해지거나 배열도 함께 다루는 경우 immer 라이브러리를 사용하면 더 쉽게 리듀서를 작성할 수 있습니다.

스토어 만들기

스토어를 만들떄는 createStore 함수를 사용합니다. 이 함수를 사용하려면 코드 상단에 import 구문을 넣어 리덕스에서 해당 함수를 불러와야 하고, 함수의 파라미터에는 리듀서 함수를 넣어 주어야 합니다.

index.js의 최상단에 redux의 createStore를 import 해줍니다.

그리고 reducer 함수 밑에 해당 store 부분을 추가해줍니다.

스토어를 생성해 주었다면, 스토어 내장 함수들을 사용하면 됩니다.

render 함수 만들기

render라는 함수를 작성합니다. 해당 함수는 상태 업데이트 시마다 호출되며 리액트의 render 함수와는 다르게 이미 html을 사용하여 만들어진 UI의 속성을 상태에 따라 변경해 줍니다.

index.js의 store 아래부분에 해당 render 함수를 추가합니다.

구독하기

이제 스토어의 상태가 바뀔 때마다 방금 만든 render 함수가 호출되어야 합니다. 이 작업은 스토어의 내장 함수 subscribe를 사용하여 수행하면 됩니다.

subscribe 함수의 파라미터로는 함수 형태의 값을 전달해 줍니다. 이렇게 전달된 함수는 추후 액션이 발생하여 상태 업데이트 시마다 호출됩니다.

이번 프로젝트에서는 subscribe 함수를 직접 사용하지만, 추후 리액트 프로젝트에서 리덕스를 사용 할 때는 이 함수를 직접사용하지 않습니다. 그 이유는 컴포넌트에서 리덕스 상태를 조회하는 과정에서 react-redux라는 라이브러리가 이 작업을 대신해주기 때문입니다.

render 함수 밑에 해당 이미지 처럼 코드를 추가해줍니다.

액션 발생시키기

액션을 발생시키는 것을 디스패치라고 합니다. 디스패치를 할 때는 스토어의 내장 함수 dispatch를 사용합니다. 파라미터는 액션 객체를 넣어주면 됩니다.