2024내일배움캠프/TIL

[TIL] 1/31 React 숙련주차(3) Redux

SMILELY 2025. 1. 31. 20:22

Redux

전역상태 라이브러리

프롭스 드릴링을 해결하기 위한 도구

 

1. Global state와 Local state

 - Local state(지역 상태)

    컴포넌트에서 useState를 이용해서 생성한 state로 좁은 범위 안에서 생성된 state

 - Global state(전역 상태)

    Global state는 컴포넌트에서 생성하지 않고 중앙화 된 특별한 곳에서 State들이 생성된다

    즉, 중앙 state 관리소라고 생각하면 된다

 

    중앙 State관리소에서 State를 생성하고, 만약 어떤 컴포넌트에서 State가 필요하다면

    컴포넌트가 어디에 위치하고 있든 상관없이 State를 불러와서 사용할 수 있게 된다

Redux 설정

 

1. 리덕스 설치

 리엑트 파일을 만들고 터미널에서 yarn add redux react-redux

2. src 파일 밑에 redux 파일을 만들고 redux 파일에는 config와 modules 파일을 만든다

   cofing 파일 안에는 configStore.js 폴더를 만든다

   리덕스 파일 안에서 리덕스 코드들을 전부 모아 놓는 것

3. configStore

 1) rootReducer를 만든다

 2) store를 조합한다

 3) 만든 store를 내보낸다

main.jsx에 만든 store로 App을 감싸줘서 어디서든 store를 사용할 수 있게 한다

주요 개념 복습

 

  • 액션객체란, 반드시 type이란 key를 가져야 하는 객체, 또한 리듀서로 보낼 "명령"이다
  • 디스패치란, 액션객체를 리듀서로 보내는 "전달자" 함수
  • 리듀서란, 디스패치를 통해 전달받은 액션객체를 검사하고,
    조건이 일치했을 때 새로운 상태값을 만들어내는 "변화를 만들어내는" 함수
  • 디스패치(dispatch)를 사용하기 위해서는 useDispatch()라는 훅을 이용해야 한다
    • 디스패치는 스토어의 내장함수 중 하나
    • 우선, 디스패치는 액션을 발생 시키는 것 정도로 이해하자
    • dispatch라는 함수에는 액션을 파라미터로 전달한다
      ex) dispatch(action)
  • 액션객체 type의 value는 대문자로 작성한다(JS에서는 상수를 대문자로 작성하는 룰이 있다)

Ducks 패턴

Redux 앱을 구성할 때 사용하는 방법론

일반적으로 분산되어 있던 액션 타입, 액션 생성자, 리듀서를 하나의 파일로 구성하는 방식

 

  1. Reucer 함수를 export defalut 한다
  2. Action creator 함수들을 export 한다
  3. Action type은 app/reduce/ACTION_TYPE 형태로 작성한다
    (외부 라이브러리로서 사용할 경우 또는 외부 라이브러리가 필요로 할 경우에는 UPPER_SNAKE_CASE로만 작성해도 괜찮다)

그래서 모듈 파일 1개에 Action Type, Action Creator, Reducer가 모두 존재하는 작성방식이다

RTK(Redux ToolKit)

기존의 리덕스를 좀 더 체계성 있게 다루기 위한 것

 

- yarn add @reduxjs/toolkit로 설치

- RTK에서는 모듈보다는 slices를 사용한다

   기존의 리덕스에서 직접 다 만들어야 했던 부분들을 RTK에서는 제공하기 때문에 slice는 아주 중요한 개념!

 

- 크롬의 익스텐션 Redux DevTools를 통해 어떤 액션이 오고가고 state는 어떻게 관리되고 있는지 확인할 수 있다

Flux 패턴

Facebook에 의해 개발된 애플리케이션 아키텍처로 데이터의 단방향 흐름을 강조한다

 

- 액션 -> 디스패처 -> 스토어 -> 뷰
   이렇게 관리되는 순환적인 흐름은 애플리케이션의 데이터 흐름을 예측 가능하게 만들어, 복잡한 상호작용이 많은 대규모 애플리케이션을 쉽게 관리할 수 있게 돕는다

 

- Ducks 패턴과 Flux 패턴

  - Ducks는 즈로 Redux 코드의 구조를 단순화하는 데 초점을 맞추고, Flux는 애플리케이션의 데이터 흐름을 체계화하는 데 중점을 둔다

  - Ducks 패턴과 Flux 패턴은 서로 다른 측면에 초점을 맞추고 있지만,

    그 근본적인 목적은 모두 애플리케이션의 상태 관리와 데이터 흐름의 체계를 잡는 것

    특히 Redux를 사용하는 React 애플리케이션에서 이 둘은 함께 사용될 수 있다

 

 

리덕스 너무 어려워,,,,,,,,,

새로운 무언갈 새롭게 배우는 느낌이다

이게 뭐죠ㅜㅜ 반복하면 된다 라고 하신 튜터님들의 말씀을 믿고 반복하는 수 밖에 없다!!!

그리고 주말동안 꼭 프로미스 개념 머리에 탑재하기 꼭 아직도 헷갈린다

await asnyc는 잘 쓰는데 promise가 어렵다