[Redux] Redux를 이용한 CRUD

0. 정적인 웹페이지 만들기

• Redux를 도입하기전 간단한 웹페이지를 만든다.

---

1. 부품화

• 각각의 기능에 대해 모듈화를 시킨다.

---

2. store 생성과 state 사용하기

• store를 생성하고 state를 사용한 코드이다.
• 결과는 처음과 같지만 reducer내부에 있는 contents의 내용을 바꾸면 그에 해당하는 코드들이 전부 바뀐다는 점이 다르다.

---

3. action을 dispatch를 통해서 전달하기

• store의 state값을 변경하기 위해서 action을 발생시키고 action이 dispatch를 통해서 reducer를 실행시키면 state의 새로운 값을 return 한다. state값이 바뀌면 subscribe하고 있는 함수들을 호출해줌을 통해서 ui가 업데이트된다.
• event.preventDefault() -> event가 발생했을 때 event를 발생시킨 그 태그의 기본적인 동작을 못하게 방지하는 코드이다.
• action에서 필수적인 property는 type이다.

---

4. subscribe를 통해서 자동 갱신 되도록 처리

• action을 dispatch를 통해 전달하면 reducer가 state값을 갱신하고 dispatch가 subscribe하고 있는 함수들을 호출해주기 때문에 그에 따라서 render가 동작해서 state값을 참조한 후 ui를 새로 그리기 때문에 클릭할때마다 자동갱신이 된다.

• HTML, CSS를 클릭할때마다 본문이 자동갱신 된다.

---

5. 글생성 기능 구현

• 글생성 기능을 구현한 코드이다.

---

6. 글삭제 기능 구현

• 글삭제 기능 후 최종화면은 다음과 같다.

• 최종 코드는 아래 깃허브에서 확인할 수 있다.

https://github.com/KoSangWon/redux-tutorial

KoSangWon/redux-tutorial