react nodeBird 1-5(Redux 적용시키기)

리덕스(Redux)란?

  여러 컴포넌들에서 쓰이는 공통적인 데이터들을 따로따로 흩어져있습니다. 컴포넌트가 분리되어있으면 데이터들이 흩어져 있어야하고, 그런 데이터들이 흩어지지않게 하고 싶으면 부모 컴포넌트를 이용하여 자식 컴포넌트들에게 전달해줘야했습니다. 

  하지만, 매번 수동으로 부모컴포넌트를 만들고, 자식 컴포넌트에 데이터를 보내는 과정이 너무 번잡스럽기 때문에 데이터를 중앙에서 하나로 관리할 수 있게 도와주는 게 리덕스입니다.

리액트에 리덕스 붙이기

store 디렉토리 안 configureStore.js 만들기

store/configureStore.js 속 코딩

   const wrapper = createWrapper(configureStore, { debug: process.env.NODE_ENV === 'development', });

로 2번째 항목에 옵션 객체를 넣어줍니다. 

pages/_app.js

_app.js 파일에 고차 컴포넌트를 이용하여 export default wrapper.withRedux로 NodeBird를 감싸줍니다. 

redux 설치하기

  예전의 경우, <></>에 <Provider>를 작성해줘야 했지만, redux @6버전이 되면서 <Provider>는 자동으로 적용이 되어 따로 작성해줄 필요는 없습니다. 

이 데이터를 관리하는 툴은 대표적으로 리액트의 context API, MobX, Redux가 있습니다. 

리덕스

  장점은 에러가 나와도 에러추적이 용이하여 해결하기 쉽습니다. 단점으로는 코드량이 많아집니다.

 MobX

  장점은 코드량이 적고, 리액트 숙련자들이 많이 사용합니다. 단점은 오류추적이 어렵습니다.

리액트의 Context API와 다른 라이브러리(리덕스, MobX)와의 차이점

  비동기를 지원하냐 안하냐의 차이가 있고, 보통 데이터를 서버에서 많이 받아오는데, 비동기는 항상 실패를 대비해야합니다.(요청, 성공, 실패) context API는 일일히 다 작성해줘야되는 단점이 있습니다. 

state → action → dispatch → reducer → 데이터 변경

  리덕스에서 저장소에 있는 데이터를 변경하려면 action을 사용해야합니다. 리덕스에서는 Reducer를 이용할 수 있는데, ...state 이 부분을 해주는 이유는 리액트의 불변성 때문입니다.   

 ex) const prev = { nickname: 'zero' } 

      const next = { nickname: 'boogi' }

  이전과 다음의 값이 달라서 이전기록(prev)가 남아있고, 다음기록(next)도 남아있습니다. 그래서 새롭게 Reducer의 return 뒤에 객체를 만들어놓을 수 있습니다. 

  하지만, 

 ex) const prev = { nickname: 'zero' }

      const prev = next;

      const next = { nickname: 'boogi' }; 으로 코드를 작성해버리면 prev = next 참조가 되어 기록(history)이 사라지게 됩니다. 

  따라서, ...state를 해주는 이유는 유지해도 되는 것들은 참조관계로 해두고, 변경할 데이터들은 바뀌게 두는 것으로 리덕스를 쓰는 목적입니다.

  configureStore.js에서 store의 의미는 state(데이터 저장소)와 Reducer를 의미하고, Reducer는 이전상태를 액션을 통해 다음상태로 만드는 함수라고 생각하면 됩니다. 

reducers/index.js

  rootReducer를 만들고 아래 항목을 작성해줍니다. 

닉네임 변경 action

  닉네임 변경 action를 만들어줍니다. 하지만, 위에서 보듯이 비슷한 액션을 여러번 만드는 것은 코드도 많이 차지하고, 비효율적인것을 알 수 있습니다. 이럴 때 함수를 이용하여 간단하게 변경할 수 있는데, 이것을 동적액션, 액션생성기(action creator)라고 부릅니다.

   비동기 액션의 경우, 차후에 배우므로 차후에 작성하겠습니다.

함수형 action creator

 위 캡쳐처럼 괄호 안에 data를 받아주고, 그때그때 다른 값을 만들 수(받을 수) 있게 함수를 만들수 있습니다. 

리덕스의 원리

  action을 만들어서 dispatch해주면 Reducer가 해당항목을 다음상태로 만들고, 이전 상태와 다음 상태에서 바뀌는 값이 확인되면, 알아서 데이터가 연결된 컴포넌트에 알아서 데이터가 변경되는 원리입니다. 

  react-redux를 설치해주고, 리덕스 데브툴즈도 사용할 수 있게 설치해줍니다. 

미들웨어 코드 작성하기

  enhancer를 통해 미들웨어를 리덕스에 포함시킬 수 있습니다. const enhancer를 작성하고, 개발모드에서는 composeWithDevTools로 개발자모드에서는 데브툴즈를 사용할 수 있게 작성해줍니다.

redux 사용 전 props를 통해 데이터를 넘겨주었음

이제 props 대신 redux를 이용하여 데이터 전달할 수 있다

props로 전달받았던 LoginForm.js

변경된 LoginForm.js

  props로 데이터를 전송받았던 UserProfile, LoginForm도 이제는 Redux의 dispatch를 이용하여 바로 전송 받을 수 있습니다. 

reducers/index.js

reducer

  initialState로 초기 값을 지정해주고, 액션 생성기(action creator)를 통해 data를 받아오고, Reducer에서 변경하고 싶은 데이터를 변경해주면 됩니다. 그리고 리덕스 데브툴즈를 이용하여 어떤 값이 변경되고 있는지도 확인할 수 있습니다. 

Redux Devtools로 확인해볼 수 있다