Study note/WebApp

React Native Study Note - Redux 패턴

공대 아로마 2020. 12. 10. 17:54

학부생 때는 MVC 패턴으로 웹앱 만들곤 했었는데, 그리고 대기업 인턴 면접 때도 MVC에 대해서 질문 받았던 기억이 나는데, 이게 이미 옛날 패턴이라고 하니 뭔가 마음이 싱숭생숭하다. 웹이 그만큼 오랜만인 거겠지,,

 

어쨌든! 이제 React Native를 할 거니까 어떤 패턴을 사용하지? 하고 검색해봤는데, Redux라는 패턴을 가장 많이 추천하는 것 같다.

 

약 6년 전 쯤, 페이스북에서 Flux라는 패턴을 발표했었고, 그 이후에 Flux와 Reducer를 혼합(?)하여 다시 탄생시킨 Redux 패턴이 발표되었다.

 

Action → Dispatcher → Store →View

 

앱의 상태 State를 하나의 저장소 Store에 트리 형태로 저장한다.

Component끼리 state와 props를 거치지 않고, store에 직접 접근해서 상태를 변경시킨다.

Action을 보내면, 이 객체를 dispatch()함수의 인자로 넘겨주고, Reducers가 받아서 어떻게 변경할지 명시된대로 반환한다.

리듀서가 함수 같은 역할이다.

 

Reducer는 (state, action)이렇게 두 가지 인자를 받는다. state는 이전 상태, action은 발생한 액션 객체이다.

 

Redux 패턴은 단방향이라 코드 흐름이 예측 가능하다는 장점이 있다.

 

 

 

** 참고한 사이트

 

[React] 리덕스 (Redux) 이해하기

10년 전까지만 해도 프론트엔드 개발의 트렌드는 MVC (Model - View - Controller) 패턴이었다. Model이란 어플리케이션의 데이터를 관리해주는 부분을 말한다. View란 어플리케이션이 사용자에게 어떻게

im-developer.tistory.com