[React] 리액트 없이 쓰는 리덕스_①

리덕스는 리액트에 종속된 라이브러리가 아님!

리액트에서 사용하려고 만들어졌으나 다른 UI 라이브러리, 프레임워크와 함께 사용할 수 있음.

바닐라(vanilla) 자바스크립트랑도 같이 사용할 수 있음.
바닐라(vanilla) 자바스크립트는 라이브러리, 프레임워크 없이 사용하는 순수 자바스크립트 자체를 의미함!

이번엔 바닐라(vanilla) 자바스크립트 환경에서 리덕스를 사용해 리덕스 핵심 기능 및 작동 원리를 이해해보도록 하자!

---

Parcel로 프로젝트 만들기

① 프로젝트 폴더 생성

# 바탕화면에 react 폴더 안에 만들겠다는 뜻!
cd desktop
cd react      
mkdir vanilla-redux
cd vanilla-redux

② package.json 생성

npm init -y

③ Parcel 설치

# 글로벌로 Parcel 설치
npm install -g parcel-bundler

# 글로벌 설치가 잘 안될 경우 로컬로 설치
npm install parcel-bundler --save-dev

④ Parcel 설치
node_modules에 폴더 생성

New-Item index.html -ItemType File
New-Item index.js -ItemType File

그러면 이렇게 잘 생길 것임!

⑤ Parcel 실행
터미널에서 개발 서버 실행해 보자!

parcel index.html

---

리덕스(Redux) 모듈 설치

리덕스를 설치하려면 redux와 react-redux 두 개의 패키지를 설치해야 한다.

① Redux 설치

npm install redux

② React-Redux 설치
리액트와 리덕스를 연결해주는 라이브러리

npm install react-redux

잘 설치된 것을 확인할 수 있다!