TIL # 2022.02.18
React # Redux
📝오늘 배운 내용
우리가 React를 사용해서 프로젝트를 만들 때 프로젝트의 규모가 점점 커질수록 자식으로 넘겨줘야 하는 props의 깊이도 점점 깊어질 것이다. 그렇게 되면 코드도 비효율적이고 유지보수하는 측면에서 불편함이 있는 것이 당연하게 된다. 그래서 우리가 원하는 state상태를 어디서든 사용할 수 있게 해주는 라이브러리가 있다. 그것이 바로 Redux이다.
Redux는 React안에 있는 라이브러리가 아니라 다른곳에서도 사용할 수 있는 상태관리 라이브러리이다.
Redux의 기본 개념 : 세 가지 원칙
- Single source of truth
- 동일한 데이터는 항상 같은 공간에서 데이터를 가지고 온다.
- 즉, 데이터를 저장하는 store라는 하나뿐인 공간이 있다.
- State is read-only
- action이라는 객체를 통해 state를 변경할 수 있다.
- Changes are made with pure functions
- 변경은 순수 함수로만 가능하다.
Store
- 상태가 관리되는 오직 하나의 공간
- 컴포넌트들에서 state 정보가 필요할 때 store에 접근을 해서 state 정보를 가져올 수 있다.
Action
- 자바스크립트 객체이다.
- store에게 앱의 데이터를 운반하는 역할을 한다.
{
type: "ORDER",
drink: {
menu: "Americano",
size: "Grande",
iced: false
}
}
Reducer
- Action에서 Store로 데이터를 운반하는데 Reducer를 거쳐야 한다.
- Action객체는 Dispatch에게 전달되고, Dispatch는 Reducer를 호출해서 새로운 state를 생성한다.
브라우저에서 +버튼을 클릭하는 이벤트가 발생하면 Dispatch의 전달 인자로 Action객체를 담아서 Reducer로 전달된다. Reducer는 Action객체의 타입에 따라서 다른 동작을 수행하게 된다. 그 동작의 수행 결과로 새로운 new state가 반환이 된다고 생각하면 되겠다.
Redux의 장점
- 상태를 예측 가능하게 만들어 준다.
- 유지보수에 좋다.
- 디버깅에 유리하다 (action과 state log 기록 시)
- 테스트를 붙이기 쉽다.
Author And Source
이 문제에 관하여(TIL # 2022.02.18), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kdobro92/TIL-2022.02.18저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)