티스토리 뷰

프론트엔드 깍두기/React.js 조각

DAY09

최삐뚤빼뚤씨 2024. 9. 8. 12:31

Redux
- 상태 관리 라이브러리이며, 리액트 뿐만 아니라 모든 JS코드에서 동작한다.
- Flux 패턴을 기반으로 생성되었기 때문에 단방향으로 동작하여 흐름을 파악하기 쉽고 예측 가능하다.

Redux 패턴
- Flux와는 다르게 하나의 App에 하나의 Store가 존재하고, Flux 패턴을 좀 더 쉽게 사용할 수 있는 라이브러리이다.
- Component -> Action -> Reducer -> Store -> State -> Component

1) 컴포넌트(Component)
- Action이 발생한다.
- 나중에 변경된 State를 반영하기 위하여 Store가 Subscribe(구독)을 해 놓는다.

2) 액션(Action)
- 변화가 필요할 때 발생하는 신호이다.
- Dispatch()로 감싸서 Reducer로 전달된다.
- Action에는 구분점(Type)을 필수로 담고 필요한 데이터가 있다면 parameter로 같이 담긴다.
- 이후에 리듀서에 전달되기 전에 Store를 가져와서 Action과 함께 리듀서에 전달된다.

3) 리듀서(Reducer)
- 전달받은 Action에서 Type을 가져온 뒤 구분하여 state를 변경하는 등 알맞은 로직(함수)가 실행되는 순수함수이다.

4) 스토어(Store)
- state를 저장하는 저장소이며, subscribe 해놓은 컴포넌트로 가서 변경된 state 값을 전달해준다.

Redux의 원칙
- 1개의 App에는 1개의 store만 존재해야한다.
- state는 불변성을 가져야 한다.
- 리듀서는 반드시 순수함수로 만들어져야 한다.


------------------------------------------------------------------------------
Routing
- 클라이언트가 요청한 URL을 분석하여 알맞는 페이지로 응답하는것
- 여러 페이지로 구성된 웹 애플리케이션을 만들 때 사용한다.

공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2025/02   »
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
글 보관함