Redux
💡 Redux is a pattern and library for managing and updating application state, using events called "actions".
공식 홈페이지에서는 Redux를 어플리케이션의 state를 Action이라는 이벤트를 통해 관리하는 방법이라고 설명하고 있다.
Redux가 없더라도 상태를 관리할 수는 있는데 굳이 Redux가 왜 필요할까?
Redux가 필요한 이유
💡 상태 관리에서 발생하는 오류와 불편함을 줄이기 위해!
일반적으로 컴포넌트간의 통신은 직접 이루어지지 않고 부모 컴포넌트를 통해 통신이 이루어진다.
다음과 같은 경우에서는 구조가 간단하기 때문에 부모 컴포넌트인 App을 통해서 toDo와 toDoList의 전송이 이루어진다.
App에서는 값의 변경을 위한 onChange 함수와 list에 추가하기 위한 onSubmit 함수를 Form에 전달하고, Form에서는 사용자의 입력을 받는다.
onSubmit 함수를 통해 list에 추가된 toDoList를 ToDoList를 통해 화면에 렌더링한다.
간단한 toDoList 예제이지만, 입력, 렌더링, 통신이 모두 다른 컴포넌트에서 이루어지는 것을 확인할 수 있다.
App.js
// App.js
import ToDoList from "./component/ToDoList";
import Form from "./component/Form";
import { useState } from "react";
const App = () => {
const [toDo, setToDo] = useState("");
const [toDoList, setToDoList] = useState([]);
const onChange = (event) => {
const {
target: { value },
} = event;
setToDo(value);
};
const onSubmit = (event) => {
event.preventDefault();
setToDoList([...toDoList, toDo]);
setToDo("");
};
return (
<div className="App">
<Form onSubmit={onSubmit} onChange={onChange} toDo={toDo} />
<ToDoList toDoList={toDoList} />
</div>
);
};
export default App;
Form.js
// Form.js
const Form = ({ toDo, onChange, onSubmit }) => {
return (
<>
<form onSubmit={onSubmit}>
<input
type="text"
placeholder="Input To Do."
value={toDo}
onChange={onChange}
/>
<input type="submit" value="Add" />
</form>
</>
);
};
export default Form;
ToDoList.js
// ToDoList.js
const ToDoList = ({ toDoList }) => {
return (
<>
<h2>To Do List</h2>
<ul>
{toDoList.map((toDo) => (
<li key={toDo}>{toDo}</li>
))}
</ul>
</>
);
};
export default ToDoList;
실제 서비스는 더 복잡한 구조를 지니고 있을텐데, 여러 컴포넌트에서 props와 state를 사용하다보면 오류가 발생할 확률이 커질 수 밖에 없다.
다음과 같은 구조에서 노랑과 초록 컴포넌트가 통신하기 위해서는 여러 컴포넌트를 거쳐야 한다. 이를 관리하기 위해 최상위 컴포넌트가 모든 state를 가지고 있게 되면, 코드의 길이가 길어질 뿐만 아니라 유지보수 측면에서도 단점이 존재한다.
예를 들어, props의 이름이 prop에서 newProp으로 바뀌면 여러 컴포넌트에서 일일히 이름을 바꿔야하는 등 불편함이 생기게 된다.
Redux의 도입
Redux를 사용하면 state를 전역으로 선언해서 관리가 가능해진다. state가 업데이트되는 시기, 위치 등과 그 로직에 대해 이해하기 쉬워진다.
하지만, 이를 위해 컴포넌트간 데이터의 흐름에 대해 제대로 이해하는 것이 중요하다. 그렇지 않다면 Redux를 사용했을 때 생산성이 감소할 수 있기 때문이다.
상태의 변화가 빈번하고 구조가 복잡한 경우에는 Redux를 통해 시간과 복잡성을 줄일 수 있지만, 어플리케이션 규모가 작은 경우에는 Redux를 꼭 사용할 필요는 없다.
결론
어플리케이션의 규모, 상태 관리 등 여러 요소를 고려하여 Redux를 도입한다면 개발에 소요되는 시간이나 코드의 복잡성을 줄이는 등 생산성을 크게 높일 수 있다.
참고
