Redux란

What is Redux? 

리덕스는 쉽게 말해 자바스크립트 애플리케이션을 위한 상태(State) 관리 라이브러리이다. 리덕스가 무엇인지 배우기 전에 ❗️왜 리덕스를 사용하는지 이해하고 있어야한다. Redux를 사용하는 이유는 다음과 같습니다.

1. props 문법 귀찮을 때 사용

리액트를 사용해서 웹개발을 진행 할때, index.html 파일 안에 컴포넌트들을 생성해서 개발을 진행합니다. 컴포넌트는 html 덩어리라고 생각해면 이해하기 쉽습니다. 함수인데 html 덩어리를 뱉는 함수라고 생각하면 됩니다.

출처: 코딩애플

출처: 코딩애플

이렇게 컴포넌트를 만들어 놓고 가져와서 사용하면됩니다. 그런데, 개발을 하다보면 state를 만들고 싶을 때가 있습니다. state란 쉽게 변수라고 생각하면 이해하기 쉽습니다. 예를들어, 몸무게 관리앱을 만든다고 했을 때 유저들의 몸무게를 저장할 변수가 하나 필요하다 했을 때 이를 state로 만들면 다음과 같습니다,

출처: 코딩애플

출처: 코딩애플

이때 주의할 점은 현재 배경 컴포넌트에 state변수를 선언했습니다. 그러면 메뉴 컴포넌트와 글자 컴포넌트에서 바로 사용할 수 있을까요? 결론은 안됩니다. props 문법으로 꼭 전송을 해주어야만 사용할 수 있습니다. 일종의 허락을 받아서 사용한다고 생각하면 되겠습니다.

출처: 코딩애플

출처: 코딩애플

이렇게 글자 컴포넌트에서도 몸무가 state를 바로 사용할 수 없고 props문법을 통해 꼭 전송을 해주어야만 사용할 수 있습니다.

출처: 코딩애플

그러면 만약 컴포넌트가 100개, 1000개로 엄청 많다고 했을 때 모든 컴포넌트마다 props를 통해 전송해 주어야할까요? 이는 매우 비효율적입니다. 왜냐하면 state를 전송해주기 위해서 props 문법을 100, 1000번 전송을 해주어야 하기 때문입니다.

출처: 코딩애플

이때 해결해주는 것이 바로 리덕스입니다. 리덕스를 설치하면 state보관함 store.js 파일을 만들 수 있는데 거기에 중요하다고 생각되는 state를 저장해두면 컴포넌트들이 필요할 때마다 꺼내서 사용하면되는 방식입니다. props를 통해 일일이 전송하지 않아도되고 필요할 때마다 꺼내서 쓰면된다는 장점이 있습니다. 또한 코드가 짧아지고 간결해지는 장점이 있습니다.

출처: 코딩애플

출처: 코딩애플

출처: 코딩애플

위 사진처럼 체중 이라는 state 변수를 선언해서 아래 사진처럼 컴포넌트에서 단순히 꺼내서 쓰면 됩니다.

출처: 코딩애플

이처럼 리덕스를 쓰는 첫 번째 이유는 모든 컴포넌트들이 props없이 state(변수)를 직접 꺼내 사용할 수 있기 때문입니다.

2. state 변경(관리)가 용이하기 때문

예를들어, 다음과 같이 store.js 파일에 몸무게 state를 선언하고 여러 컴포넌트들이 이를 꺼내서 사용하고 있다고 해봅시다. 이때 각 컴포넌트에서 몸무기 state를 변경하고 싶을때도 있을 것 입니다. 

출처: 코딩애플

그래서 각각의 컴포넌트들이 몸무게 state를 변경하기 시작했다고 가정해 보겠습니다. 

출처: 코딩애플

이렇게 각 컴포넌트마다 state를 변경했는데, 갑자기 버그가 발생했다고 생각해보겠습니다. 그리고 컴포넌트의 개수는 100만개라고 해보겠습니다. 그러면 이때 버그를 찾기위해 모든 컴포넌트를 살펴봐야할 것입니다. 100만개를 일일이 다 디버깅 해야하기 때문에 매우 비효율 적입니다. 

출처: 코딩애플

이렇듯 100만개를 모두 확인하는 것이 비효율적이기 때문에 이를 해결하고자 리덕스를 사용하게 되었습니다. 어떻게 해결할 수 있을까요? 리덕스를 사용하면 state 변수를 저장한 store.js파일에 수정방법을 미리 다 정의해 놓는것입니다. 몸무게 1 기능과 몸무게 -1 기능, 그리고 몸무기 /100 기능 등 이런 수정사항들을 미리 state.js파일에 저장해 놓고 가져다 쓰는 방식으로 작동하는 것입니다. 

출처: 코딩애플

어떻게 보면 API를 만든다고 생각하면 되겠습니다.

출처: 코딩애플

이렇게 하면 컴포넌트들이 직접 수정해서 state를 사용하는 것이 아니라 store.js 파일에 있는 기능을 요청해서 사용하는 셈입니다.

출처: 코딩애플

그래서 컴포넌트들은 요청만 할 수 있도록 코드를 제한해 놓습니다. 

출처: 코딩애플

그럼 요청을 받은 store.js는 컴포넌트를 수정해 주면됩니다. 이렇게 하면 갑자기 버그가 일어났을 때, 버그를 찾고 수정하기 쉬울 것입니다. 그래서 범인은 store.js에 있기 때문에 store.js만 확인하면 됩니다. 모든 컴포넌트를 확인하는 것이 아니라!

출처: 코딩애플

이런식으로 미리 state 수정 방법을 정의해 놓고 컴포넌트에서 수정 요청이 들어오면 수정해 주면됩니다. 이렇게 state 수정방법을 우리는 Reducer라고 부르기로 했습니다. state 수정하는 방법이고 꺼내 쓰는 것도 리듀서라고 부르기로 했습니다. 그러면 컴포넌트에서 state 수정요청은 어떻게 할까요? dispatch를 통해 이루어집니다. 

출처: 코딩애플

이렇게 리덕스가 무엇인지 그리고 리덕스를 사용하는 이유 1. props를 사용하지 않기 위해 2. state 관리를 용이하게 하기 위해 에 대해서 배웠습니다. 그리고 참고 사항으로 리덕스와 비슷한 역할을 하는 MobX, Recoil 라이브러리가 있으니깐 한번 알아보시기 바랍니다.

세부 사항

• Props(properties)
  • shothand for properties
  • Props are how componets talk to each other. - 구성 요서가 서로 통신하는 방법
  • props flow downwards from the parent componet - 상위 구성 요소에서 아래쪽으로 흐른다.
  • immutable -> 자식 컴포넌트의 props를 변경하기 위해서는 부모 컴포넌트의 state를 변경해야한다.

<ChatMessages // component
	messages={messages} // props is a messages
    currentMember={member} // props is a messages
/>

즉, chatMessages라는 부모컴포넌트에서 messages, currentMember props를 통해 자식 컴포넌트로 전달한다.

• • mutable
  • state가 변하면 re-render 된다. -> 즉 새로운 데이터를 보여주게 된다. 
  • parent component에서 chile component로 data를 보내는 것이 아니라 그 component 안에서 데이터를 전달 하려면 state를 사용한다. 
  • mutable

state = {
	message: '',
    attachFile: undefinded,
    openMenu: false,
}

 

Setting Up Redux

다운 받아야할 dependency. 여기서 3,4번은 리덕스 미들웨어이다.

• redux
• react-redux
• redux-promise - 리덕스를 잘 쓸 수 있게 도와주기 위해서 
• redux-thunk - 리덕스를 잘 쓸 수 있게 도와주기 위해서!

https://www.youtube.com/watch?v=QZcYz2NrDIs&t=328s