React, Redux 개념 교육

2일차부터는 React와 Redux을 연동하는 교육을 진행했다.

아래 모듈을 필수로 포함해 환경 셋팅을 요청드렸다. 내가 정말 도움을 많이 받은 블로그도 같이 소개해드렸다.

https://d2.naver.com/helloworld/1848131

 

• redux
• redux-pender
• redux-actions

그치만 아무래도 에밀리는 처음으로 스스로 개발 언어를 스터디하는거다보니 어려움이 있었다.

나도 처음에 공부할때 내가 뭘 모르는지도 모르는 상태였는데, 아마 비슷할 것 같다.

그래서 단계별 실습으로 두려움과 복잡함을 극복하고자 아래와 같이 진행 순서를 명시해줬다.

1. 모듈 설치
2. 폴더 구조 만들기
3. redux + redux-pender 연결하기
4. redux-action + redux-pender 연결하기

1번까지 완료한 상태에서 리덕스가 왜 필요한지에 대해 물었다. 사실 리덕스가 없어도 충분히 프론트엔드 개발이 가능하기 때문이다.

나도 처음 리덕스를 접했을때 이걸 왜 쓰는지 이해를 못해서 여러 블로그를 검색했는데 아래 글이 제일 이해가 잘됐다. (감사합니다)

medium.com/@wooder2050/%EB%A6%AC%EB%8D%95%EC%8A%A4-redux-%EB%8A%94-%EC%99%9C-%EC%93%B0%EB%8A%94-%EA%B1%B4%EB%8D%B0-2eaafce30f27

리덕스(Redux)는 왜 쓰는 건데⁉

Java Spring으로 자바 프로젝트를 오래 만들어서 그런지 MVC 패턴으로 개발할때 어떤 부분이 불편한지 이해가 확 됐다.

로직이 바꿔서 MVC 중 하나라도 변경사항이 발생하면 M.V.C에 연관되어 있는 부분을 다 바꿔줘야 되고, 기능이 많아질수록 플로우도 복잡해졌다. 좋은 프로그램은 결합도는 낮추고, 응집도를 높여야된다는데 Java을 하는 동안에는 자괴감의 연속이었다.

 

페이스북에서 Flux 패턴을 발표하고 리덕스가 나왔다. Flux는 데이터의 흐름이 단방향으로 흘러가는 건데, 나는 html과 같은 트리형 구조에는 단방향 패턴이 맞다고 생각이 들었다. 그리고 이 패턴의 사용성과 효율을 더 높여주는 모듈이 리덕스라고 이해했다.

실제로 사용하다보니 Flux 패턴으로 사용하다보면 전체적인 state 상태를 확인하기도 어려웠고, 일괄 변경하기에도 어려웠다.

예를들어, Parent 컴포넌트에 p state가 있고, Child 컴포넌트에 c state가 있으면 Child 컴포넌트에서는 p state을 props로 받지 않는 이상 확인이 불가했고, 바꿔주려면 props로 p state을 바꿔주는 함수를 받아서 처리해야했다.

이렇게 되면 결과적으로 응집도는 리액트 특성상 높지만 결합도는 점점 높아지게 될 것 같다.

리덕스를 사용하게 되면 state을 store에서 같이 관리가 되기 때문에 Child 컴포넌트에서도 p state을 바꿀수 있게 되고, p state의 상태까지 확인할 수 있게 된다. 더불어 전체적인 state 상태를 Redux devTool로 확인이 되서 개발할때 콘솔을 찍는일이 현저히 많이 줄었다.

 

이 내용과 더불어 action과 reducer의 역할을 에밀리에게 설명해주기 위해 이렇게 말했다.

"
사용자가 어떤 행위를 하면 보여지는 데이터가 바꿔야 된다고 했을 때,
action이 어떤 행위이고 기존의 데이터와 새로운 데이터를 합치는 놈이 reducers예요!
reducers을 통해 바꿔야 되는 데이터로 state, 즉 현재 상태의 데이터가 바뀌는거죠
저는 개발하면서 리덕스가 좋았던건 예전에 javascript로 할때 API에서 뭔가를 요청하면
거기에 해당하는 document id 객체를 찾아서 값을 바꿔줬었는데,
리덕스를 쓰면 화면에서 사용하는 state을 적어두고 사용자가 어떤 행위를 하면 state가 바뀌면서
제가 해야되는게 아무것도 없어졌다는거예요!
그리고 API 요청하는 값은 다양한 형태로 다양한 곳에서 활용된다면
다시 요청할 필요 없이 store에서 꺼내서 쓸수 있다는게 너무 좋았어요
"

이해가 될지 걱정했었는데 다행히 에밀리가 이해를 해서 이어 redux-pender에 대해 설명했다.

redux-pender는 수행하고 있는지, 수행이 성공적인지, 수행이 실패인지를 구분하기 위해서 사용하는 놈이다.

// 1번
const reducer = handleActions({
  [SET_QUERYFORM_DATA]: (state, action) => {
    const { key, index, value } = action.payload
    if (index !== undefined) {
      return state.update(‘queryForm’, () => state.get(‘queryForm’).update(key, (x) => x.set(index, value)))
    } else {
      return state.update(‘queryForm’, () => state.get(‘queryForm’).update(key, () => value))
    }
  }
}, initialState)

// 2번
export default applyPenders(reducer, [
  {
    type: ADDEUIPMENT_INITIALIZE,
    onSuccess: (state, action) => {
      const { data } = action.payload
      return state.merge({
        equipTypeList: fromJS(data.data)
      })
    }
  },
  {
    type: GET_EQUIP,
    onSuccess: (state, action) => {
      const { data } = action.payload
      if (data.result === true && data.data.length > 0) {
        const equipment = data.data[0]
        if (!equipment.createdAt) equipment.createdAt = new Date()
        return state.merge({
          queryForm: fromJS(equipment)
        })
      }
    }
  }
]) 

1번은 현재 state을 바꿀때 사용한다. 여기서는 state가 잘 바꿨는지 확인이 안된다.

(물론 결과를 보면 알 수 있지만 1번에서는 Return 결과를 알수 없다.)

그래서 API랑 별개로 화면 내용을 바꾸고 싶을 때 사용한다. (입력할때나, 저장하기 전 값 등)
2번은 onPending, onSuccss, onFailure 함수를 지원해서 API을 호출하고 state가 잘 바꿨나 확인하는 용으로 사용하고 있다.

한마디로 성공실패를 구분하기 위함이다. (아쉬운 점이 있다면 다음에는 onFailure에 처리하는 부분을 공통으로 빼고 싶다.)

 

react-action은 react랑 redux 사이에서 사용자가 어떤 행위를 하면 '무슨 처리'를 하라고 연결하는 놈이다.

여기서 '무슨 처리'는 위에 예시에 기재했던 type 값으로 연결한다. 상수로 같은 값을 보고 있다.

 

정리하면 화면에서 액션 함수를 호출하면 연결되어 있는 reducer을 호출하고 state가 바뀌게 된다. state가 바뀌니까 화면도 바뀌게 된다.

2일차에는 리덕스가 무엇인지, 왜 쓰는지, 어떻게 흘러가는지 알려드린것 같다.

내가 다양한 방법으로 해본게 아니라 맘에 걸리지만 일단 내 식대로 알려줬는데 나중에 일취월장이 되어 새로운 방법을 나에게 전파해줬으면 좋겠다ㅎㅎ