이론상으로 리덕스를 한번 훑어봤지만 많이 사용되는 라이브러리치고는 사용 이유를 모르겠어서 다시 한번 정리하고자 함
Redux(리덕스)란 Javascript(자바스크립트) 상태 관리 라이브러리이다.
상태 관리 도구가 왜 필요한가?
- 상태 : React에서 State는 component 안에서 관리되는 것이다.
- 리액트는 여러 컴포넌트로 구성되어 있다. 각각의 컴포넌트마다 state가 있을 수 있고, useState와 같은 hook으로 상태를 관리할 수도 있다.
- state가 변경되면 컴포넌트가 리렌더링되어 변하게 된다.
- 리액트는 단방향 데이터 흐름( 부모 -> 자식) 으로만 데이터가 전달이 가능하기 때문에 자식 컴포넌트도 state에 맞게 변경하려고 한다면 props로 전달해야 한다.
- 만약 자식 컴포넌트에서도 props로 받은 state를 변경가능하게 하려면 state 변경함수 또한 props로 전달받아야 한다.
- 즉, state, state 변경함수 모두 props로 받아야 함.
// 부모 컴포넌트
function ParentComponent() {
const [name, setName] = useState('Parent Name');
return <ChildComponent name={name} setName={setName} />;
}
// 자식 컴포넌트
function ChildComponent(props) {
return (
<div>
<p>부모 이름:{props.name}</p>
<button onClick={() => props.setName('')}>초기화</button>
</div>
);
}
→ 위 코드에서는 부모에서 자식으로 state를 한번 전달 했지만 그 깊이가 깊어지면 state 관리가 어렵고 가독성 떨어짐
이를 과도한 props driling 이라고 한다.
- 이를 해결하기 위해 전역 상태를 관리하는 라이브러리를 사용
- 대표적인 라이브러리가 Redux
리덕스 언제 사용해야 할까?
- 프로젝트의 규모가 큰 가?
- YES : redux
- NO : Context API
- 비동기 작업을 자주 하게 되는가?
- YES : redux
- NO : Context API
- 리덕스를 배워보니 사용하는게 편한가?
- YES : redux
- NO : Context API 또는 Mobx
단순 전역 상태 관리 기능만 있어도 된다면 Context API를 사용하고, 디버깅 로깅 등의 상태 관리 외의 기능이나 미들웨어가 필요하다면 Redux를 사용하면 된다.
더보기
단순 전역 상태 관리 : 전역에서 상태를 관리한다.
전역 상태 : 애플리케이션을 구성하고 있는 코드 어디에서든지 접근이 가능하며, 변화에 따라 렌더링에 영향을 줘야하는 값비동기 작업 : 요청을 보냈을 때 응답 상태와 상관없이 다음 동작을 수행, 비동기적 코드의 실행 결과는 동기적 코드가 전부 실행되고나서 값을 반환
Redux의 세 가지 원칙
1. Single source of truth
- 단일 스토어 사용을 권장한다.
- 동일한 데이터는 항상 같은 곳에서 가지고 온다.
- 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미이다.
2. State is read-only
- 상태는 읽기 전용이어야 한다.
- 리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능하다.
- 리덕스에서도 액션이라는 객체를 통해서만 상태를 변경할 수 있다.
- 예를 들어 배열 형태의 상태가 있는데, 새로운 값을 넣어주어야 한다면 push가 아닌 concat 함수를 통해 새로운 배열로 교체하여 업데이트 해야한다. "불변성" 유지
3. Changes are made with pure functions
- 리듀서는 순수한 함수이여야 한다.
- 순수한 함수 : 동일한 입력을 받았을 때 언제나 동일한 출력을 내는 함수
- 만약 배경색이 클릭을 통해 랜덤으로 바뀌는 로직을 작성 -> 매번 출력이 바뀌기 때문에 순수하지 못한 함수임
진행 중인 프로젝트에 어느 부분에 어떻게 적용시킬지...?
개인 포트폴리오 : ...
'React' 카테고리의 다른 글
[React] Debounce_lodash 활용 (1) | 2023.10.11 |
---|---|
[React] redux (0) | 2023.10.11 |
[React] 백엔드 프로그래밍 : Node.js의 Koa 프레임워크 (0) | 2023.05.03 |
[React] 서버 사이드 렌더링 (0) | 2023.05.02 |
[React] 코드 스플리팅 (0) | 2023.05.01 |