Redux란?
공식 문서 ver. redux란?
Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다.
내가 느낀 ver. redux란?
- 거미줄 같이 얽혀 있고 많은 곳에 흩뿌려져 있는 데이터를 한 곳에서 관리해주는 도구
느낀 것에 이어 redux 그 자체에 대해 조금 더 디테일하게 알아보쟈
1. Redux 베이직📚 : Redux의 기초를 이루는 원칙
모든 상태는 하나의 저장소 안에 저장된다.
애플리케이션에서 발생하는 모든 상태는 store라는 이름의 하나의 저장소에서 모두 저장된다.
이렇게 하나의 저장소에서 중앙집중형 방식으로 상태를 관리한다.
console.log(store.getState())
/* Prints
{
visibilityFilter: 'SHOW_ALL',
todos: [
{
text: 'Consider using Redux',
completed: true,
},
{
text: 'Keep all state in a single tree',
completed: false
}
]
}
*/상태는 읽기 전용이다.
상태를 직접적으로 제어할 수 없다. 상태를 변경시키기 위해서는 액션 객체를 통해서만 가능하다! 상태를 외부에서 제어하지 못하게 하기 때문에 의도와 다르게 바뀌는 문제를 사전에 차단할 수 있다. 그렇기 때문에 예측 가능하다라고 한다.
store.dispatch({
type: 'COMPLETE_TODO',
index: 1
})
store.dispatch({
type: 'SET_VISIBILITY_FILTER',
filter: 'SHOW_COMPLETED'
})변화는 immutable 해야한다.
redux 공식문서에서는 이 부분을 '변화는 순수 함수로 작성되어야한다.'라고 표현한다. 하지만 아직 순수함수라는 단어에서 오는 느낌이 확 와닿지 않아서 immutable로 대체했다.
리듀서(reducer)는 이전의 상태와 액션을 받아 다음 상태를 반환하는 함수이다. 이때, 리듀서는 이전의 상태를 직접 변경하는 것이 아니라 새로운 상태 객체를 생성해 반환한다. 그렇기 때문에 이전의 모든 상태들은 그대로 관리가 되고 redux의 Time Traveling 기능을 통해 이전 상태로 돌아갈 수 있다!
2. redux 이때 쓰면 좋아!
공식문서 ver. redux 사용하면 좋은 이유
redux를 통해 store에서 어플리케이션에서 사용되고 있는 global state를 쉽게 관리할 수 있도록 도와준다.
redux에서 제공하는 여러 기능을 통해 state가 언제, 어디서, 왜, 어떻게 업데이트 됐는지, 이렇게 state가 변경되었을 때 발생하는 로직이 어떻게 동작 해야하는지를 쉽게 이해할 수 있도록 도와준다.
redux 어디에 써야 좋은지 알고 쓰자 : one-way data flow
State는 특정 시점에서의 현재 어플리케이션의 상태를 나타낸다.- 이를 기반으로 UI가 랜더된다.
- 이벤트가 발생하면(액션) state는 업데이트 된다.
- 새로 업데이트된 state에 따라 UI는 리랜더 된다
출처
이렇게 동작하는 state가 여러 컴포넌트에서 사용이 된다면?
데이터도 돌고... 나도 돌게 된다...
- 필요한 컴포넌트에 state를 전달하기 위해서는 그 사이에 있는 모든 컴포넌트에 state를 전달해야 함
- 한 곳의 state가 업데이트 될 때, state를 사용하는 모든 곳에서 state가 업데이트 되어야 함
- 사용되는 곳이 많아질수록 모든 state가 제대로 동작하는지 확인하기 어려움, 코드가 관리 어려워짐
이럴 때 사용할 수 있는 방법은 컴포넌트에서 사용되는 state를 추출해서 하나의 큰 저장소에 저장하는 것이다.
이렇게 되면 모든 컴포넌트에서 state와 state를 업데이트 하는 로직에 접근 ⭕
- 어느 컴포넌트에서든 state를 업데이트하면 state를 사용하는 모든 곳에서 동일하게 변동 됨
- 사용되는 곳이 아무리 많아도 하나의 저장소에서 가져오기 때문에 state 관리 쉬움, 코드 간결!
💡redux 기본 아이디어
- global state를 담는 하나의 중앙 집중된 저장소
- state를 업데이트 할 때 따라야하는 규칙(액션)
예측 가능한 코드를 만들 수 있는 이유!
결론
예전에 리액트를 처음 공부하면서 html과 ejs로 구현했던 걸 리액트로 구현하는 프로젝트를 진행했었다.
이 때 리액트가 처음이어서 state와 props 자체가 낯설고 어려워서 진짜 데이터도 돌고... 나도 돌았던 기억이 있다. 정말... 코드도 복잡하고 어려웠어서 이번에 복잡한 props들을 잘 관리하기 위해 redux를 사용하기로 했다.
이번에 redux를 사용하면서 그냥 돌아가는 코드 말고
- 어떤 라이브러리인지
- 왜, 언제 쓰면 좋은지
- redux를 쓸 때 조금 더 깔끔하게 쓸 수 있는 방법은?
을 알고 싶어서 정리를 시작했다.
그래서 다음에는 뭐할꺼냐면!
이번에 정리하면서 리덕스에 대해 정리해 놓은 다른 블로그들 보다
공식문서를 우선순위로 해서 정리를 했다.
리덕스를 처음 프로젝트에서 쓸 때 store, state, dispatch.. action 등등 모르는 용어들이 있어서 먼저 용어를 정리하고
Redux App Structure, Basic Redux Data Flow를 참고하며 redux를 깔끔하게 사용하는 방법을 공부해보려 한다!
참고자료
