리액트에는 state(상태)라는 것이 존재한다. 동적인 데이터를 사용할때 state를 통해 사용한다.
| import React, { useState } from 'react'; | |
| const Counter = () => { | |
| const [number, setNumber] = useState(0); | |
| handleIncrease = () => { | |
| setNumber(number + 1); | |
| }; | |
| handlerDecrease = () => { | |
| setNumber(number - 1); | |
| }; | |
| return ( | |
| <div> | |
| <h1>counter</h1> | |
| <p>{number}</p> | |
| <button onClick={handleIncrease}>+</button> | |
| <button onClick={handleDecrease}>-</button> | |
| </div> | |
| ) | |
| } | |
| export default Counter; |
이렇게 아주 간단한 컴포넌트의 state는 다루기가 엄청 쉽다. 허나 여러 컴포넌트가 이용된다면, 또 글로벌한 state가 필요하다면 위와 같은 방식으로는 사용하기 힘들다.
그래서 사용하는 것이 Redux(리덕스)이다.
Redux(리덕스)란 무엇인가?
리덕스란 클라이언트 state를 관리하는 라이브러리이다. 비슷한 방법으로 ContextAPI라는 것이 있다.
리덕스는 React에서 사용률이 가장 높다. 그리고 state관련 로직들을 각각 파일로 나눠서 효율적으로 관리할 수 있다. 또한 컴포넌트에서 state에 손쉽게 접근 가능하다.
리덕스를 왜 사용하는 걸까?
다음과 같은 컴포넌트들이 존재한다고 하자.
F에서 어떠한 값(state)을 변경 하고 그 값을 H에게 전달하려면 Root -> B -> F, Root -> A -> D -> G -> H 이런 절차를 거쳐서 값을 전달해야한다.
이 방법은 완전히 비효율 적이다. 해결방법으로 Redux를 사용한다면 F가 Redux Store에게 어떠한 값 변경에 대한 이벤트를 던지고 H는 Redux Store에서 변경된 어떠한 값을 가지고 올 수 있다.
이것으로 리덕스에 대해 간략하게 알아봤다.